背景图像上的 CSS 曲线

Question

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

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

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>