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

Question

嗨，我希望在我的 div 上产生这样的效果，但只在底部：

我现在做的是这样的：

.container {
  width: 500px;
  height: 150px;
  background: #FDCA40;
}

.box {
  width: 100%;
  height: 100px;
  background: #FE7448;
  -webkit-mask: radial-gradient(circle 20px, transparent 97%, #fff 100%) top/50px 200%;
  // not working:
  // -webkit-mask: radial-gradient(circle 20px, #FE7448 97%, #FE7448 100%) top/50px 200%;
}

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

面具中的哪个属性允许我为圆圈赋予颜色？整个面具属性让我感到困惑。

Answer 1

你可以这样做：

.container {
  width: 500px;
  height: 150px;
  background: #FDCA40;
}

.box {
  height: 100px;
  background: #FE7448;
  -webkit-mask: 
    linear-gradient(#fff 0 0) 
      top/100% calc(100% - 20px) no-repeat,
    radial-gradient(circle closest-side, #fff 97%,transparent 100%) 
      bottom/50px 40px space; 
}

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

使用 CSS 变量轻松管理它：

.container {
  width: 500px;
  height: 150px;
  background: #FDCA40;
}

.box {
  --r:20px; /* radius */
  --d:10px; /* minimum distance between circles */
  
  height: 100px;
  background: #FE7448;
  -webkit-mask: 
    linear-gradient(#fff 0 0) 
      top/100% calc(100% - var(--r)) no-repeat, 
    radial-gradient(circle closest-side, #fff 97%,transparent 100%) 
      bottom/calc(2*var(--r) + var(--d)) calc(2*var(--r)) space; 
}

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

<div class="container">
  <div class="box" style="--r:30px;--d:0px;"></div>
</div>