使用纯css完整剪裁带有边框的路径

Question

我需要创建剪切角，但同时应该保留剪切位置的形状的border，我尝试使用clip-path来做这件事，但我得到了一个带有剪切角的矩形，border与它们一起剪切。

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

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

Answer 1

一个选项是添加一个包装器div，并使用另一个clip-path来制作border。本质上，这是模仿border。

首先，将包装器div设置为所需border-color的background-color。然后在这个新div上使用相同的clip-path，并指定一个inset值，该值将决定您的border-width。

/* Center Demo */
html,
body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.bottominfo {
background-color: #fddde6;
position: absolute;
inset: 1px; /* border width */
clip-path: polygon(7% 0, 100% 0, 100% 30%, 100% 70%, 93% 100%, 30% 100%, 0 100%, 0% 30%);
}
.bottominfo-wrapper {
background-color: #FF003C;
position: relative;
width: 50vw;
height: 11vw;
clip-path: polygon(7% 0, 100% 0, 100% 30%, 100% 70%, 93% 100%, 30% 100%, 0 100%, 0% 30%);
}

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

注意：这将不适用于您的rgbabackground-color，因为它不能具有.1的opacity。所以我用了一个相同颜色的hex。