CSS曲线在背景图片上

Question

我的设计师给了我这个设计，我不知道如何处理图像上方和下方的曲线的最佳方法。

我已经考虑过剪切路径，但是无法弄清楚如何弯曲它。如果可以帮助，我不想使用图像。

Answer 1

您可以使用边界半径执行此操作。

.box {
  width:100%;
  height:100px;
  background-color: lightblue;
  border-radius:0% 0% 135% 135% / 0% 0% 255% 255%;
}

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