Как реализовать фигурную линию в резиновой верстке

#html #вёрстка #css

Добрый день!

Подскажите, пожалуйста, как можно такое реализовать при резиновой верстке?



Спасибо.
    

Ответы

Ответ 1

Если честно, то я старался, но увы :D, как у вас на картинке не вышло, ибо займет
очень много времени. 
Да, реализовано кривыми Безье, и сама общая кривая состоит из нескольких частей.
Вот картинка для понимания, как вообще происходило строение:

Как видно, метод bezierCurveTo() позволяет прорисовать только одну кривую Безье,
по этому пришлось сделать несколько кривых (может быть я и не прав). 
В общем вот отладочный код, который выше на скриншоте: http://pastebin.com/fkRtBvA8
Вот пример: http://jsfiddle.net/Fw5Q9/
И собственно сам код:







    
    


Алсо, вам придется попотеть, находя идеальные значения для каждой кривой. 
Я делал всё на листочке:

Но потом понял, что расчеты получились кривые и сохранить пропорции не получится,
а переделывать уже не было времени.


Ответ 2

Вот мой вариант с использованием нескольких фигур, образующих волну своими границами:
http://bars.koding.com/test/wave.html
Этот вариант вполне подходит в случае появления кнопок (красных кружков) в местах
перетекания одной дуги в другую: они скрывают несостыковки. Еще правильнее было бы,
наверное, svg использовать.


Ответ 3

Можно нарисовать SVG и растягивать ее на всю ширину. А иконки располагать используя
flex-box модель.
PS: Чтобы не быть голословным, набросал прототип http://goo.gl/czCEj .
Работает только под WebKit, под другие браузеры делать лень.