CSS边框右侧样式

Question

我想要一个设计，我的主要div（盒子）看起来像下面的东西，我不希望我的右上边界被扔掉。你可以帮我设计一下吗

Answer 1

You could use :after pseudo element

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>

Or 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>