html - CSS 边框右侧样式

Question

我想要一个设计，其中我的主 div(框)看起来像下面这样，我不希望我的右上边框被丢弃。你能帮我设计一下吗？

Answer 1

你可以使用:after伪元素

div {
  width: 250px;
  height: 150px;
  border: 2px solid #677D50;
  border-bottom: 20px solid #677D50;
  margin: 50px;
  background: white;
  position: relative;
}
div:after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 70px;
  height: 70px;
  background: white;
  border-bottom: 2px solid #677D50;
  transform: rotate(46deg) translateY(-52px);
}

<div></div>

或SVG

rect {
  fill: #677D50;
}
polygon {
  fill: none;
  stroke: #677D50;
  stroke-width: 2;
  stroke-miterlimit: 10;
}

<svg x="0px" y="0px" width="400px" height="250px" viewBox="0 0 400 250">
  <polygon points="378,230 24.5,230 24.5,20.5 339,20.5 378,52.5 " />
  <rect x="24.5" y="203" width="353.5" height="27" />
</svg>