Question

关于如何使用CSS在div底部制作锯齿形效果的任何想法。是边框类型还是剪切路径？

Answer 1

您可以尝试使用径向渐变的多个背景，并对阴影应用阴影滤镜：

.box {
  width:200px;
  height:100px;
  margin:10px;
  background:
    linear-gradient(#f00,#f00) top/100% calc(100% - 25px),
    radial-gradient(85px 30px at bottom,transparent 50%,#f00 52%) 0 calc(100% - 8px)/80px 20px,
    radial-gradient(85px 30px at 50% 10px,#f00 50%,transparent 52%) 80px 100%/80px 30px,
    radial-gradient(85px 30px at bottom,transparent 50%,#f00 52%) 160px calc(100% - 8px)/80px 20px;
  background-repeat:no-repeat;
  filter:drop-shadow(0 0 5px blue);
}

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

如果您想更简单地添加更多的渐变，并每次都增加背景位置：

.box {
  width:300px;
  height:100px;
  margin:10px;
  background:
    linear-gradient(#f00,#f00) top/100% calc(100% - 25px),
    
    /* top curve */
    radial-gradient(85px 30px at bottom,transparent 50%,#f00 52%) 0 calc(100% - 8px)/80px 20px,
    /* bottom curve */
    radial-gradient(85px 30px at 50% 10px,#f00 50%,transparent 52%) 80px 100%/80px 30px,
    /* top curve */
    radial-gradient(85px 30px at bottom,transparent 50%,#f00 52%) 160px calc(100% - 8px)/80px 20px,
    /* bottom curve */
    radial-gradient(85px 30px at 50% 10px,#f00 50%,transparent 52%) 240px 100%/80px 30px;
  background-repeat:no-repeat;
  filter:drop-shadow(0 0 5px blue);
}

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

使用CSS变量更容易，您还可以控制曲线：

.box {
  --p:80px;
  --top:radial-gradient(calc(var(--p) + 5px) 30px at bottom,transparent 50%,#f00 52%);
  --bottom:radial-gradient(calc(var(--p) + 5px) 30px at 50% 10px,#f00 50%,transparent 52%);
  
  width:300px;
  height:100px;
  margin:10px;
  background:
    linear-gradient(#f00,#f00) top/100% calc(100% - 25px),
    
    var(--top)    calc(0*var(--p)) calc(100% - 8px)/var(--p) 20px,
    var(--bottom) calc(1*var(--p)) 100%            /var(--p) 30px,
    var(--top)    calc(2*var(--p)) calc(100% - 8px)/var(--p) 20px,
    var(--bottom) calc(3*var(--p)) 100%            /var(--p) 30px,
    var(--top)    calc(4*var(--p)) calc(100% - 8px)/var(--p) 20px,
    var(--bottom) calc(5*var(--p)) 100%            /var(--p) 30px;;
  background-repeat:no-repeat;
  filter:drop-shadow(0 0 5px blue);
}

<div class="box">
</div>

<div class="box" style="--p:100px;">
</div>

<div class="box" style="--p:60px;">
</div>

另一种简化语法：

.box {
  --p:80px;
  --top:radial-gradient(calc(var(--p) + 5px) 30px at bottom,transparent 50%,#f00 52%);
  --bottom:radial-gradient(calc(var(--p) + 5px) 30px at 50% 10px,#f00 50%,transparent 52%);
  
  width:300px;
  height:100px;
  padding-bottom:25px;
  box-sizing:border-box;
  margin:10px;
  background:
    var(--top)    calc(0*var(--p)) calc(100% - 8px),
    var(--bottom) calc(1*var(--p)) 100%            ,
    var(--top)    calc(2*var(--p)) calc(100% - 8px),
    var(--bottom) calc(3*var(--p)) 100%            ,
    var(--top)    calc(4*var(--p)) calc(100% - 8px),
    var(--bottom) calc(5*var(--p)) 100%            ,
    #f00 content-box;
  background-size:var(--p) 20px,var(--p) 30px;
  background-repeat:no-repeat;
  
  filter:drop-shadow(0 0 5px blue);
}

<div class="box">
</div>

<div class="box" style="--p:100px;">
</div>

<div class="box" style="--p:60px;">
</div>

Answer 2

这是我可以在短时间内完成的操作，您可以根据需要进行调整。这不是一个优雅的解决方案，因为您已经创建了空元素并将其绝对放置，但是可以完成工作。

#wave {
  position: relative;
  height: 200px;
  width: 250px;
  background: white;
  box-shadow: 0 0 5px #0d829c;
}

.first {
  position: absolute;
  height: 31px;
  width: 60px;
  bottom: -15px;
  left: 0px;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 -2px 5px -1px #0d829c;
}

.second {
  position: absolute;
  height: 31px;
  width: 70px;
  bottom: -12px;
  left: 60px;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 2px 6px -1px #0d829c;
}

.third {
  position: absolute;
  height: 31px;
  width: 60px;
  bottom: -15px;
  right: 60px;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 -2px 5px -1px #0d829c;
}

.fourth {
  position: absolute;
  height: 31px;
  width: 60px;
  bottom: -12px;
  right: 0px;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 2px 6px -1px #0d829c;
}

<div id="wave">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
  <div class="fourth"></div>
<div/>

将div做成非矩形的底部？

2 个答案: