CSS 背景图片上的曲线

Question

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

我考虑过 clip-path 但不知道如何弯曲它。如果可以的话，我不想使用图像。

Answer 1

您可以使用 border-radius 来做到这一点。

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

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

CSS Curve over background image