使用掩码在 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>

使用掩码在 div 上自定义底部边框

Custom bottom border on div using mask

html

css

css-mask