сколько себя помню всегда верстал такие секции след образом. Просто брал картинку в таком формате и ставил как background. Но заказчик хочет что бы в будущем имел возможность менять картинку а форма секции ( круглая ) всегда оставалось таким. Скажите пожалуйста по средствам css, html как сделать что бы при смене фона картинки, фон всегда оставался такой формой?
Вариант с SVG.
Сгенерировать подходящий SVG можно тут - https://smooth.ie/blogs/news/svg-wavey-transitions-between-sections
.bg {
width: 100%;
background-image: url(https://via.placeholder.com/150);
background-repeat: repeat;
}
.svg-wave {
position: relative;
bottom: 0;
width: 100%;
height: 150px;
overflow: hidden;
}
.svg-wave svg {
height: 100%;
width: 100%;
}
<div class="bg">
<h1>logo</h1>
<h2>We are the best company!</h2>
<div class="svg-wave">
<svg viewBox="0 0 500 150" preserveAspectRatio="none" style="">
<path d="M0.00,49.98 C152.64,-50.81 270.03,253.13 500.00,49.98 L500.00,150.00 L0.00,150.00 Z" style="stroke: none; fill: #fff;"></path>
</svg>
</div>
</div>
<hr>
<h1>BREAK</h1>
<hr>
<div class="bg">
<div class="svg-wave">
<svg viewBox="0 0 500 150" preserveAspectRatio="none" style="">
<path d="M0.00,49.98 C152.64,-50.81 270.03,253.13 500.00,49.98 L500.00,150.00 L0.00,150.00 Z" style="stroke: none; fill: #fff;"></path>
</svg>
</div>
</div>
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости