Как сделать край блока волной?

Question

[Виктория]

Как сделать верхний или нижний край блока с вот такими двумя волнами?

Answer 1

[Максим]

https://codepen.io/topicstarter/pen/JoPpGVZ мне дальше лень подгонять под какие то ещё примеры... в общем вот так..
рисуем векторную графику ставим её на фон в base64 подгоняем и т д...обычная рутина

Comments

[Виктория]

здОрово) осталось разобраться) новое для меня

Answer 2

[Виктор Кожухарь]

Использовать свойство CSS clip-path

Гуглить, как можно сделать волну при помощи clip-path. Пример запроса: "clip-path wave"

Есть вот такой генератор, например. https://www.wavegenerator.app/

Comments

[ksnk]

wavegenerator - не самое здравое средство для рисования волн. Он там рисует приближенно, полигоном. Потом, при больших размерах картинки появятся глупые вопросы - почему край такой угловатый? Проще в редакторе нарисовать path, что-то вроде
m0 7q6 6 13 6 6 0 13-6 6-6 13-6 6 0 13 6V0H0V7z и глаже и компактнее...

[Виктор Кожухарь]

ksnk, Поэтому я и привел это просто как пример, а основной упор сделал на гугление. Основная сложность CSS в том, что начинающий иногда просто не знает о существовании того или иного свойства.