Как сделать такую форму для секции?

264

21 июня 2019, 05:20

сколько себя помню всегда верстал такие секции след образом. Просто брал картинку в таком формате и ставил как background. Но заказчик хочет что бы в будущем имел возможность менять картинку а форма секции ( круглая ) всегда оставалось таким. Скажите пожалуйста по средствам css, html как сделать что бы при смене фона картинки, фон всегда оставался такой формой?

Answer 1

Вариант с 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>