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

Question

[Виктория]

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

Answer 1

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

Использовать свойство 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 в том, что начинающий иногда просто не знает о существовании того или иного свойства.