Как сделать волны картинке сверху и снизу?

Question

[Константин]

Всем привет , как на сайте сделать блок у которого верх и низ в виде волн.
В моей голове пока схема такая,

Верх и них картинки это SVG волны, генерировать их можно через разные сервисы.
Вопрос как этим волнам дать продолжение картинки по сути фигура нужна

Answer 1

[rootnoroot]

вопрос не понятен по продолжению картинки
это что значит?

если по такой схеме, то дайте через before,after с position absolute
снизу и сверху эти волны
в чем проблема?

Comments

[Константин]

Наверное более понятнее будет по другому. Как в фигуру SVG вставить картинку фоном. Например есть SVG в виде пузыря и в нем до границ фигуры это картинка.

Вот тут я чайник полный поэтому примеры в виде кода приветствуются. Гугление правильного ответа пока не дают

[Константин]

Константин, Вы мыслите не в том направлении. Эти волны SVG должны быть поверх картинки, и цвет должен быть тот же, что и фон. Вот например как на этом сервисе Тыц.... Может показаться что тут волна цветная рисуется, на самом деле цветной это фон, а волна это белая svg.

[Максим]

Константин, сама волна есть ?

[Константин]

Максим, Да сама волна есть.
Кажется и решение уже есть почти.

Отпишусь о решении вдруг кому пригодиться потом.

[Максим]

Константин, волну в растровом редакторе закрасить в чёрный цвет и через mask и webkit-mask наложить на нужное изображение