Как сделать такой background?

Question

[falwxey]

Здравствуйте.

как реализовать такой фон? Проблема в том, что текст может быть разной длины или высоты, волна должна быть по размеру текста. C svg работать особо не приходиться(иногда нарисовать какой-то треугольничек в онлайн редакторе, не более) Может есть ссылки на codepen, или кто-то сталкивался с подобным?

Comments

[Сергей]

Волна должна растягиваться или периодически повторяться?

[falwxey]

Волна должна растягиваться

Answer 1

[Виолетта Морозова]

Как один из вариантов - Маска:
1) Подготовить в фотошопе белую волну
2) Под тестом фоном использовать двойной background, например:

background: url("image/pic-mask.png") no-repeat bottom, #000 top;
background-size: 100% auto, auto;

3) Пример можно глянуть тут в первом же блоке https://vilka-vk.github.io/sedona/

Answer 2

[hrenly]

Делаете одно повторение волны (растровым изображением) ставите на background, указываете background-repeat: repeat-x, затем развлекаетесь с разными пропорциями background-size. А конкретно ставите желаемую высоту в пикселях, а ширину в процентах можно.