Кривая CSS над фоновым изображением

Question

Мне дали этот дизайн мой дизайнер, и я понятия не имею, как лучше всего справиться с кривыми как над, так и под изображением.

Я рассмотрел путь обрезки, но не могу понять, как его изогнуть.Я не хочу использовать изображения, если смогу помочь.

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>