Разделить секции ломаной линией

Question

Как на странице можно разделить секции такой ломаной линией как на изображении? У верхней секции фон планируется быть однотонным, разделенным двумя цветами по вертикали. У нижней секции фон будет изображением. Как такое реализовать? Спасибо.

Answer 1

Вроде не сложно ...14 строк ...

<body style="margin: 0;">
  <svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="ptn" width="100%" height="100%">
      <image href="https://avatars.mds.yandex.net/get-pdb/1348397/3e87dfe1-b161-4cb2-8aaa-ebf353b305c1/s1200?webp=false" 
             width="100%" height="100%"
             preserveAspectRatio="none"/>
    </pattern>
  </defs>
<path d="M0,0 1000,0 1000,600 0,600z" fill="#ccc" />
<g fill="url(#ptn)">
  <path d="M0,500 100,400 200,500 300,400 400,500 500,400 600,500 700,400 800,500 900,400 1000,500 1000,1000 0,1000z"/>
  <path d="M-20,500 100,400 200,500 300,400 400,500 500,400 600,500 700,400 800,500 900,400 1020,500" fill="none" stroke="#3bb4ab" stroke-width="30"/>
</g>
</svg>

БЛОГ НА HUSL

Разделить секции ломаной линией

Ответы (1 шт):