Как сверстать волнистую линию?

Question

[progmax]

Как сверстать волнистую линию?
Как на картинке:

Answer 1

[Nikolay Talanov]

Если эта штука будет абсолютно статичной - то делайте картинкой и не парьтесь.
Если хочется чтобы эффекты можно было присобачить - делайте свг.
tympanus.net/Development/TextInputEffects/index2.html - чекните Nao и Shoko, там при фокусе/блюре как раз идет анимация волнистой линии. Правда там линии изначально прямые, а кривая часть спрятана в оверфлоу и видна только во время анимации. У вас по виду так же красиво не получится сделать.

Answer 2

[Денис Инешин]

Картинкой.

Comments

[progmax]

Картинкой как-то не гуд... Больше вариантов нет?

Answer 3

[Дима Паутов]

Вы можете заморочиться с svg, ну или просто картинкой.

Картинкой будет не сложно.
1) Для пунктов списка: Просто вырежите одну волнистую линию и сделайте ее фоном например тега li в списке и прижмите его к верху с повторением по оси X.

2) Для самого списка: Боковую полосу, та что слева у списка так же фоном но уже к тегу ul и прижмите влево и вверх, и повторение по оси Y

Answer 4

[Ilya Korablev]

Это фоновое изображение.

Answer 5

[Дмитрий Шинкарь]

Если хочешь знать как это реализовано - жми f12 ;)

Хотя меня на самом деле посетила мысль, что волнистую линию скорее всего можно создать средствами php, но это такой геморой...) да и я не уверен собственно, но рисовать с помощью php - можно =)

Comments

[Serj-One]

Что за бред? Зачем рисовать на php, когда картинка уже есть?

[Дмитрий Шинкарь]

Serj-One: человек спросил как - я ему сказал то что я знаю...) целесообразно ли? - нет конечно, никто и не спорит! :D А может у него ТЗ такое...)

[Alexander Tartmin]

Дмитрий Шинкарь: В конечном итоге что так что так выйдет обычное растровое изображение. Другое дело через php svg генерить =)
PS: Ох щас тут насоветуем =)))

[Дмитрий Шинкарь]

Alexander Tartmin: "Ой, все..." :D

[Alexander Tartmin]

Дмитрий Шинкарь: "Ой всё..." x 2 :D

[progmax]

Спасибо за советы

Answer 6

[Serdji]

На самом деле да, картинкой самое простое. Но если заморочеться, можно было бы создать кучу дивов со свойством display: inline-block;, что бы они шли друг за другом, добавить им нижней бордер border-bottom: 1px solid black; и border-radius. Соответственно ширину и возможно высоту. как сделать вогнутый бордер тут Как добиться обратного эффекта border-radius на css?