代码之家 › 专栏 › 技术社区 › Sarabjit Singh

为div创建非矩形底部?

css3 html5 css html

-3

Sarabjit Singh · 技术社区 · 6 年前

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

CSS wavy bottom of div

我试过了 border-radius 但是看起来不太好

.element {
  margin:20px;
  height:150px;
  width:150px;
  border:1px solid;
  border-radius:0 0 50px 20px;
  position:relative;
}
.element:after {
  content:"";
  position:absolute;
  background:#fff;
  width:50%;
  bottom:-20px;
  left:20px;
  right:50px;
  height:50px;
  border-radius:50px 60px 0 0;
  border-top:inherit;
}

<div class="element"></div>

3 回复 | 直到 4 年前

Temani Afif 6 年前

您可以尝试使用具有径向渐变的多个背景,并为阴影应用下拉阴影过滤器:

.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”>
</部门>

使用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”style=“--p:60px;”gt;

DragonBorn 6 年前

这是我可以在短时间内做的,你可以根据需要调整它。这不是一个优雅的解决方案,因为您创建了空元素并将其绝对放置,但它确实起到了作用。

#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/>