Как сделать волну css

Для создания эффекта волны в CSS можно использовать псевдоэлемент ::before или ::after и свойство transform, которое будет применяться к этому элементу.

Например, создадим блок, который будет иметь волновой эффект:

<div class="wave"></div>

Зададим этому блоку стили:

.wave {
  position: relative;
  height: 200px;
  width: 100%;
  background-color: #e0f5ff;
}

.wave::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 25px;
  background-color: #99dfff;
  transform: skewY(-20deg);
  transform-origin: 0% 100%;
}

В этом примере мы задали блоку высоту 200px и ширину 100%, а также цвет фона. Для создания волны с помощью псевдоэлемента ::before мы установили его position на absolute. Затем мы задали ему ширину на 100% и высоту 25px, а также цвет фона. С помощью transform: skewY(-20deg) мы наклонили элемент на 20 градусов, а с помощью transform-origin: 0% 100% мы установили точку поворота элемента в верхнем левом углу.

Эти стили создадут эффект волны, как показано на изображении: