如何用CSS裁剪容器边缘并保留裁剪后的完整边框？

原来的clip-path会直接裁剪整个元素（包括边框），导致边框无法在裁剪边缘完整显示。下面提供两种可行的实现方案：

方案一：伪元素模拟边框 #

利用伪元素生成一个比容器大的“边框层”，对伪元素和容器应用相同的clip-path，让伪元素作为裁剪后的边框显示：

.clipped-border {
    position: relative;
    width: 300px;
    height: 200px; /* 可根据内容调整高度 */
    clip-path: polygon(15% 0%, 85% 0%, 100% 74%, 95% 100%, 5% 100%, 0 74%);
    background: #fff; /* 容器背景覆盖伪元素内部区域 */
}

.clipped-border::before {
    content: "";
    position: absolute;
    top: -1.5px; /* 取边框宽度的负值，让伪元素完全包裹容器 */
    left: -1.5px;
    right: -1.5px;
    bottom: -1.5px;
    border: 1.5px solid lightgreen;
    clip-path: inherit; /* 继承容器的裁剪路径 */
    z-index: -1; /* 放在容器下方，仅露出边框部分 */
}

<div class="clipped-border">这里可以放置内容</div>

方案二：嵌套容器分层处理 #

外层容器负责裁剪和边框，内层容器承载内容，通过内边距避免内容被裁剪：

.clipped-container {
    width: 300px;
    clip-path: polygon(15% 0%, 85% 0%, 100% 74%, 95% 100%, 5% 100%, 0 74%);
    border: 1.5px solid lightgreen;
}

.clipped-content {
    padding: 20px; /* 根据需求调整，防止内容触碰裁剪边缘 */
}

<div class="clipped-container">
    <div class="clipped-content">这里可以放置内容</div>
</div>

两种方案都能实现裁剪后边缘显示完整边框的效果：方案一更适合需要精确控制边框与容器关系的场景，方案二结构更简洁易维护。

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