div 上的自定义顶部边框仅在使用遮罩的顶部

Question

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

我知道有 css 面具属性但它对我来说真的很复杂。

我的解决方案是创建单个圆圈 svg 并重复多次，但我也需要 left/right space.

.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>

div 上的自定义顶部边框仅在使用遮罩的顶部

Custom top border on div only at the top ot using mask

html

css

css-mask