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

Чтобы создать волну в CSS, можно использовать псевдоэлементы «::before» или «::after» и свойство «transform». Вот пример:

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

.wave::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 20px;
  background-color: #87CEFA; /* цвет волны */
  bottom: 0;
  left: 0;
  z-index: -1;
  transform: skewY(-3deg); /* угол поворота */
  transform-origin: 0% 100%; /* точка, на которой происходит поворот */
}

.wave::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 20px;
  background-color: #87CEFA; /* цвет волны */
  bottom: 0;
  left: 0;
  z-index: -1;
  transform: skewY(3deg); /* угол поворота */
  transform-origin: 100% 100%; /* точка, на которой происходит поворот */
}

В этом примере классу «wave» задаются стили для создания контейнера для волнистой линии. Затем используются два псевдоэлемента (::before и ::after), которые создают две волны. Каждый из них имеет абсолютное позиционирование, цвет, положение на экране и поворот с помощью свойства «transform». Угол поворота устанавливается через «skewY» и угол поворота указывается через градусы или радианы. С помощью свойства «transform-origin» задается точка, вокруг которой происходит поворот.

Кроме того, можно использовать более сложные методы для создания волн в CSS, такие как использование SVG-изображения с анимацией или использование JavaScript для создания анимированных волн.