css - div的底部 波浪形 不固定div的高度

Question

我想把这个 div 的底部做成这个形状

.shape {
  height: 200px;
  background: #e7ecf5;
  position: relative;
  width: 100%;
}

<div class="shape">

</div>

我不想固定这个 div 的高度。

Answer 1

已编辑:运行代码段

.shape {
  height: 200px;
  background: #e7ecf5;
  position: relative;
  width: 1080px;
}

.svg {
  margin-top: -60px;
}

.svgpath {
  fill: #e7ecf5
}

<div class="shape">

</div>
<svg class="svg" height="400" width="1080">
<path class="svgpath" d="M 0 100 Q 80 120 160 100 Q 250 90 330 100 Q 440 130 540 130 Q 640 130 750 100 Q 830 90 920 100 Q 1000 120 1080 100 Q 1080 75 1080 60 Q 540 60 0 60 Q 0 70 0 100 Z" />
</svg>

https://codepen.io/anthonydugois/pen/mewdyZ

这个链接可以帮助你自己设计