html - 仅在顶部使用蒙版在 div 上自定义顶部边框

Question

嗨，我想在我的 div 上产生这样的效果，但只在顶部：

我知道有 css 掩码属性，但对我来说真的很复杂。

我的解决方案是我创建了单个圆形 svg 并重复多次，但我也需要左/右空间。

.container {
  margin: 20px 0;
  height: 400px;
  background: lightgray;
  position: relative;
}

.svg {
  background: url('../../assets/circle-gapped.svg');
  height: 100%;
  background-repeat: repeat-x;
  position: absolute;
  left: 0;
  right: 0;
  top: -30px;
}

<div class="container">
  <div class="svg" />
</div>

我不知道如何将资产上传到片段，这是上面代码的结果：

Answer 1

如下所示：

.box {
  width:300px;
  height:200px;
  background:red;
  -webkit-mask:  /*  20px = radius of circle    50px = 2*radius + 10px (distance between circles)*/
    radial-gradient(circle 20px,transparent 97%, #fff 100%) bottom/50px 200%,
    linear-gradient(#fff 0 0) left /20px 100% no-repeat, /* 20px of left border */
    linear-gradient(#fff 0 0) right/20px 100% no-repeat; /* 20px of right border */
}

<div class="box"></div>

或如下所示具有响应能力：

.box {
  height:200px;
  background:red;
  padding:0 50px;
  -webkit-mask:
    radial-gradient(circle 20px,#fff 97%, transparent 100%) bottom/50px 200% space content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:destination-out;
  mask-composite: exclude;
}

<div class="box"></div>

Answer 2

您可以使用灰色 div 上的伪元素来执行此操作，该元素具有径向渐变圆的重复图案，其半径为 50%，半径为灰色，外部 50% 为透明。当然可以更改尺寸和位置以提供您想要的确切外观。

div.yellow {
background-color:yellow;
width: 100vw;
height: 80vh;
}
div.gray {
background-color: gray;
height: 20vh;
width: 100vw;
position: relative;
top: 0;
}
div.gray::after {
 content:' ';
 width: 100vw;
 height: 10vh;
 background-color: transparent;
 position: absolute;
 top: 15vh;
 left: 0;
 z-index: 2;
 background-image: radial-gradient(gray,gray 50%,transparent 50%);
 background-size: 10vh 10vh;
 }

<div class="gray"></div>
<div class="yellow"></div>