html - css中剪切框的边框

Question

我有一个剪裁好的盒子，它在盒子的末端添加了一条对角线。我想给它加个边框，但边框也被剪掉了。

我可以仅使用 CSS/html 为剪切区域添加边框吗？所以白色在遇到黄色之前有黑色边框？

.yellowclippedbox {
  background-color: #F1BE3E;
  color: #880000;
  clip-path: polygon(20% 0, 100% 0%, 100% 100%, 0% 100%);
}

Answer 1

那 ？

body {
  background : lightblue;
  }
#my-div {
  width      : 200px;
  height     : 250px;
  margin     : 1em;
  background : yellow;
  position   : relative;
  border     : 5px solid green;
  } 
.yellowclippedbox:before {
  position   : absolute;
  top        : 0;
  left       : 50%;
  display    : block;
  content    : '';
  width      : 50%;
  height     : 100%;
  background : crimson;
  clip-path  : polygon(20% 0, 100% 0%, 100% 100%, 0% 100%);
  }

<div id="my-div" class="yellowclippedbox"></div>