Кто знает как сделать границы DIV в виде волн?

Question

[joker33]

Всем привет!
Нужно сделать границы DIV в виде волн но разных разверов. Есть у кого то какие то идеи/предложения/опыт подобного?

Пробовал как фон, но как на меня решение топорное - може есть что то лучше ....
Буду рад любым(по вопросу) советам !))
ПС - картинка как оно должно быть

Answer 1

[profesor08]

Сделай волну на svg. Просто посмотри что из себя представляет svg path. Твоя задача сгенерировать аналогичный твоему в макете.

Вот пример (В поле для скриптов увидишь кнопку настроек, там список подключенных библиотек, если понадобятся.)
https://codepen.io/peacepostman/pen/jBavvN?editors=0110

Вот еще волна
https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486...

Но лично я бы сделал на canvas, так проще и результатом проще управлять.
https://codepen.io/Profesor08/pen/ddGoxa

Comments

[joker33]

Первый пример Вот вообще то что доктор прописал - но мне нужно без анимации .....
Относительно canvas - даже не думал.

Answer 2

[lukoie]

Раз надо разные волны, нужны две дивки, у одной волна вверху, у второй -внизу, и делать их разными. А вместе они сходятся по прямой линии
Вот волна: https://jsfiddle.net/b2oytyL2/
или вот я Вам такую хрень забабацал: https://jsfiddle.net/cjw2qo9e/

Вам наверное проще всего будет в иллюстраторе сделать форму, и экспортнуть ее в свг

Comments

[joker33]

Да я тоже пробовал все делать на свг но оно должно быть и адаптивним + в качестве фона там градиент и высота блока может менятся. Сейчас сделал несколько блоков с :before/after куда вставил картинки с фоном волны. но есть один блок на котором я остановился

[lukoie]

joker33,

Да я тоже пробовал все делать на свг но оно должно быть и адаптивним

И в чем проблема?
https://jsfiddle.net/3wd33ev7/3/

[lukoie]

но есть один блок на котором я остановился

z-order

[joker33]

lukoie, блин ну вот просто выручил!!
И еще один вопрос, а можно как то сделать высоту свг адаптивной(в зависимости от высоты родителя)?

[lukoie]

joker33, ну, оно как бы можно, но оно расфигачит волну
примерно вот так, если что: https://jsfiddle.net/mksy9gz9/
оно ж не просто так называется СКАЛЕЙБЛ вектор графикс, оно скейлит
мы можем ему сказать чтобы не скейлило, тогда оно будет плющить. для кривых это будет заметно.
но смотрите, там видно в какую сторону думать.

[lukoie]

кстати, вот еще почитать https://css-tricks.com/scale-svg/

[joker33]

Спасибо большое!
А можете помочь еще в одном вопросе?)

[lukoie]

joker33, каком?