Понятное дело, в таком случае проще вырезать картинку и поставить фоном, но на проекте таких вот дизайнерских решений оч. много и хотелось бы иметь больше контроля (оперативно цвет поменять или радиус там).
Поэтому вопрос такой: можно ли без особых извращений и грязных хаков это реализовать?
Конечно можно, CSS3 это позволяет сделать. А в браузерах, которые это не поддерживают просто не будет этой волнистости, кроссбраузерность не будет нарушена.
Без особых извращений и грязных хаков это сделать не получится. Проще сделать картинкой, тем более, что она маленькая и много места в спрайте не займет. Да и кроссбраузерность будет куда лучше, чем хаки css3, svg или canvas.
Сделайте так: jsfiddle.net/iiil/Q4j22/1 jsfiddle.net/iiil/TsXDE
Тут Вам и свобода, и простота, и кроссбраузерность.
Нарисовать надо только маленький элемент волны цветом основного бэкграунда, ведь он не так часто меняется.
