如何实现响应式半透明条纹边框？clip-path效果不符求解决方案

我看到一张带条纹边框的图片（），想复现图中的边框效果，有两个疑问：

• 实现响应式的话，是不是必须用mask？
• 希望边框的黑色区域是透明的，能透出下方内容，该怎么实现？

我试过用clip-path但没达到预期，当前的代码如下：

HTML代码 #

<main>
  <section class="section border"></section>
  <section class="section"></section>
</main>

CSS代码 #

.section {
  background-color: white;
  padding: 2.5rem;
  margin: 0 1rem;
  border-radius: 25px;
}
.section.border {
  position: relative;
  margin-bottom: 25px;
}
.section.border::after {
  content: "";
  background-color: white;
  position: absolute;
  display: block;
  height: 50px;
  width: 100px;
  left: 50px;
  bottom: -25px;
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}

解决方案：透明缺口边框 + 响应式实现 #

要实现这种带透明缺口的边框，mask是最优解，不仅能轻松做出透明缺口，还天然支持响应式，不需要额外适配。核心逻辑是用渐变构建遮罩图案，把边框需要透明的区域“挖空”，透出下方内容。

完整代码

<main>
  <section class="section border"></section>
  <section class="section"></section>
</main>

/* 模拟页面背景，方便查看透明效果 */
body {
  background: linear-gradient(45deg, #e5e7eb, #9ca3af);
  min-height: 100vh;
  margin: 0;
  padding: 2rem 0;
}

.section {
  background-color: white;
  padding: 2.5rem;
  margin: 0 1rem 2rem;
  border-radius: 25px;
}

.section.border {
  /* 基础实色边框 */
  border: 4px solid #000;
  /* 用mask创建透明缺口 */
  mask: 
    /* 横向左右两段实心边框，中间镂空 */
    linear-gradient(#000 0 0) left/20% 100% no-repeat,
    linear-gradient(#000 0 0) right/20% 100% no-repeat,
    /* 纵向上下两段实心边框，中间镂空 */
    linear-gradient(#000 0 0) top/100% 20% no-repeat,
    linear-gradient(#000 0 0) bottom/100% 20% no-repeat,
    /* 四个角的实心圆角区域 */
    radial-gradient(circle at top left, #000 20%, transparent 20%),
    radial-gradient(circle at top right, #000 20%, transparent 20%),
    radial-gradient(circle at bottom left, #000 20%, transparent 20%),
    radial-gradient(circle at bottom right, #000 20%, transparent 20%);
  /* 合并所有mask图层 */
  mask-composite: add;
}

关键细节说明

1. 透明缺口实现：mask中，黑色区域会保留容器的样式，透明区域会“挖掉”容器的边框/背景，刚好让下方页面背景透出来，实现你要的“黑色边框区域透明”效果。
2. 响应式适配：所有尺寸都用百分比定义，容器大小变化时，缺口的比例会自动跟着调整，完全不需要写媒体查询。
3. 兼容性备选：如果要兼容不支持mask的旧浏览器，也可以用多层伪元素叠加模拟，但代码会繁琐很多，且响应式适配难度更高，优先推荐mask方案。

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