如何划分div的角落，边框和透明凹口

Question

我的任务是开发2个div，底部div必须一直有一个边框，并且右上角有缺口。顶部div也必须包含边框，div的右下角应该是缺角的倒数。请参阅下面的图片，以准确显示我正在尝试完成的内容。这很难解释。 ： - /

Answer 1

我会通过linear-gradient，透明border，background-clip和box-shadow执行此操作：）

div {
  width: 800px;
  max-width: 90%;
  margin: 2em auto -3.5em;
  padding: 0 2em 0 1em;
  background: white;
  position: relative;
  box-shadow: inset -3px 0 turquoise, inset 0 -3px turquoise, inset 3px 0 turquoise;
  border-top: 3em solid transparent;
  border-bottom: 2em solid transparent;
  background-clip: padding-box;
}
div:first-of-type {
  border-top:solid turquoise;
  padding-top:2em;
  }
div:first-of-type:before {
  display:none;
  }
div:before,
div:after {
  content: '';
  position: absolute;
  right: 0;
}
div:before {
  height: 2.7em;
  width: 100%;
  top: -2.7em;
  box-shadow: inset 3px 0 turquoise;
  background: linear-gradient(turquoise, turquoise) 0 0 no-repeat, linear-gradient(-135deg, transparent calc(2em - 3px), turquoise calc(2em - 3px), turquoise 2em, white 2em);
  background-size: calc(100% - 2.5em) 3px, auto
}
div:after {
  height: 2em;
  width: 2em;
  top: calc(100% - 3px);
  box-shadow: inset -3px 0 turquoise;
  background: linear-gradient(45deg, transparent calc(50% - 3px), turquoise calc(50% - 3px), turquoise 50%, white 50%)
}
div>p:first-of-type {
  margin-top: -1.5em;
  position: relative;
}
body {
  background: linear-gradient(45deg, yellow, gray, purple, white, yellow, gray, purple, white, yellow, gray, purple, white);
}

<div>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</p>
</div>
<div>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
    lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
    facilisis luctus, metus</p>
</div>
<div>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
    lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
    facilisis luctus, metus</p>
</div>