如何用纯CSS实现带完整边框的clip-path切角效果？

clip-path会将元素的边框与内容一同裁切，因此要实现带切角的边框效果，需要将边框层和背景层分离处理，以下是两种可行方案：

方案1：嵌套元素实现 #

通过外层元素承载边框，内层元素承载背景和内容，两者应用相同的clip-path路径，确保切角形状一致。

HTML代码：

<div class="bottominfo">
  <div class="content"></div>
</div>

CSS代码：

.bottominfo {
  bottom: 1.9%;
  left: 5.7%;
  position: absolute;
  border: 1px solid #FF003C;
  clip-path: polygon(7% 0, 100% 0, 100% 30%, 100% 70%, 93% 100%, 30% 100%, 0 100%, 0% 30%);
  width: 50vw;
  height: 11vw;
}
.content {
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  background-color: rgba(204, 0, 2, 0.1);
  clip-path: polygon(7% 0, 100% 0, 100% 30%, 100% 70%, 93% 100%, 30% 100%, 0 100%, 0% 30%);
}

方案2：伪元素实现（无需额外HTML标签） #

利用:before伪元素生成独立的边框层，原元素负责背景，两者应用相同的clip-path路径，通过定位让伪元素覆盖原元素下方，模拟边框效果。

HTML代码：

<div class="bottominfo"></div>

CSS代码：

.bottominfo {
  bottom: 1.9%;
  left: 5.7%;
  position: absolute;
  background-color: rgba(204, 0, 2, 0.1);
  clip-path: polygon(7% 0, 100% 0, 100% 30%, 100% 70%, 93% 100%, 30% 100%, 0 100%, 0% 30%);
  width: 50vw;
  height: 11vw;
}
.bottominfo::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border: 1px solid #FF003C;
  clip-path: polygon(7% 0, 100% 0, 100% 30%, 100% 70%, 93% 100%, 30% 100%, 0 100%, 0% 30%);
  z-index: -1;
}

内容的提问来源于stack exchange，提问作者GLobeasd