Создание волнообразной маски в нижней части блока для вставки изображения можно реализовать различными способами. Один из наиболее распространенных методов - использование SVG (векторной графики) для создания волнистой формы. Ниже приведен пример HTML и CSS кода, который позволяет создать такой эффект:
### HTML
```html
<div class="wave-section">
<div class="wave">
<svg viewBox="0 0 1440 320" preserveAspectRatio="none">
<path fill="#fff" d="M0,64L30,53.3C60,43,120,21,180,10.7C240,0,300,0,360,10.7C420,21,480,43,540,69.3C600,96,660,128,720,128C780,128,840,96,900,80C960,64,1020,64,1080,74.7C1140,85,1200,107,1260,128C1320,149,1380,171,1410,181.3L1440,192L1440,320L1410,320C1380,320,1320,320,1260,320C1200,320,1140,320,1080,320C1020,320,960,320,900,320C840,320,780,320,720,320C660,320,600,320,540,320C480,320,420,320,360,320C300,320,240,320,180,320C120,320,60,320,30,320L0,320Z"></path>
</svg>
</div>
<div class="content">
<img src="your-image-url.jpg" alt="Image Description">
</div>
</div>
```
### CSS
```css
body {
margin: 0;
font-family: Arial, sans-serif;
}
.wave-section {
position: relative;
overflow: hidden;
background-color: #007bff; /* Цвет фона секции */
}
.wave {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px; /* Высота волны */
transform: translateY(100%);
}
.content {
position: relative;
z-index: 1; /* Поверх волны */
padding: 50px 20px; /* Отступы для контента */
}
.content img {
max-width: 100%; /* Для гибкой верстки изображения */
height: auto; /* Автоматическая высота */
}
```
### Объяснение кода
1. **HTML**: Создается секция, состоящая из элементов: волны (с использованием SVG) и блока с содержанием (изображение).
2. **CSS**: Настраивается стиль для секции, самой волны и содержимого. Волна располагается в верхней части и перекрывает содержимое, создавая ощущение волнения.
3. **SVG**: Путь в SVG можно изменять, чтобы сделать волну более или менее выраженной в соответствии с вашими потребностями.
### Вставка изображения
Не забудьте заменить `your-image-url.jpg` на реальный URL вашего изображения.
Таким образом, вы получите секцию с волнообразной маской, которая красиво оформит ваше изображение.