背景图像上的 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>