Как сделать волнистый блок в верстке?

Создание волнистого блока в верстке можно достичь с помощью использования CSS и HTML.

1. Создание основного контейнера:
Начнем с создания контейнера для нашего волнистого блока в HTML. Для этого мы можем использовать тег <div>, который позволяет создавать область с контентом. Добавьте следующий код в ваш HTML файл:

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

2. Оформление контейнера:
Теперь, когда у нас есть контейнер, мы можем начать стилизацию. Добавим CSS стили для контейнера .wave-container в ваш файл CSS или внутри тега <style> в HTML:

   .wave-container {
     width: 100%;
     height: 200px;
     background: #f2f2f2;
     position: relative;
     overflow: hidden;
   }

Здесь мы устанавливаем ширину контейнера на 100%, чтобы его можно было растянуть по всей ширине родительского элемента. Высоту можно настроить на свое усмотрение.

3. Добавление волнистого эффекта:
Теперь мы создадим волнистый эффект с помощью псевдоэлементов ::before и ::after. Обновите стили для .wave-container, добавив следующий код:

   .wave-container::before,
   .wave-container::after {
     content: '';
     display: block;
     width: 120%;
     height: 150px;
     position: absolute;
     bottom: -75px;
     background: #fff;
     transform: rotate(4deg);
   }

   .wave-container::before {
     left: -5%;
     z-index: 1;
   }

   .wave-container::after {
     right: -5%;
     z-index: 2;
   }

Здесь мы используем псевдоэлементы ::before и ::after, чтобы создать два элемента, которые будут служить волнами. Мы установили им ширину 120%, чтобы обеспечить перекрытие соседних элементов и создать иллюзию волнистого эффекта. Высота каждого псевдоэлемента также настраивается на ваше усмотрение.
С помощью свойства transform: rotate(4deg) мы поворачиваем псевдоэлементы, чтобы волны выглядели натурально.

4. Добавление анимации (по желанию):
Если вам нужна анимация для вашего волнистого блока, вы можете добавить ее с помощью CSS анимаций или CSS ключевых кадров. Например, вы можете добавить плавное движение волн с использованием следующего кода:

   .wave-container::before,
   .wave-container::after {
     /* Добавьте следующие свойства для создания анимации */
     animation: wave-animation 3s linear infinite;
   }

   @keyframes wave-animation {
     0% {
       transform: translateX(0);
     }
     100% {
       transform: translateX(-50%);
     }
   }

Здесь мы создаем анимацию wave-animation, которая будет двигать волны горизонтально влево. Вы можете настроить параметры анимации (продолжительность, итерацию и т.д.) по вашему усмотрению.

5. Завершение:
После применения всех указанных выше изменений, вы должны увидеть волнистый блок в вашей верстке!

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