Как сверстать вот такой элемент?

Question

[Frel]

Вот элемент обведен карандашом нужно сделать косую линию и кружки на ней в хтмл?

Comments

[sergey]

волнистую линию?

[sergey]

возьми картинкой и не заморачивайся

[zooks]

Честно говоря, дизайн - говно. Косые линии - дебильный тренд последних двух лет как вышла GTA V.
Самое простое - зафигачить бекграундом через псевдоэлемент :after.

Answer 1

[Сергей]

Зеленый фон, с волной, это фон вот этого блока
Вам необходима отдельная картинка в PNG, т.к. правая нижняя часть картинки будет прозрачной.
Картинка с салатом - это отдельная картинка, фон блока внутри которого находится шапка.

Answer 2

[Praytic]

Что? Это просто хедер с изображением в бекграунде.

Comments

[tef]

Тут чувствуется паралакс

Answer 3

[tef]

Если уж особо душа просит, то можно сконвертировать в svg. Но проще картинкой.
Есть ещё вариант с радиальным градиентом... но зачем?

Comments

[Frel]

Это как?

[tef]

Frel: Как сконвертировать в svg или как с радиальным градиентом?

[Frel]

то и то!

[tef]

Frel: На градиентах: https://jsfiddle.net/kzdyhuoa/ Если помудиться подольше, то можно достигнуть желаемого результата.
А SVG, ну просто срезаете кусочек и в илюстраторе или фотошопе сохраняете, как svg.

Answer 4

[nirvimel]

Это вообще не элемент страницы, а просто фон.
Как сделать? - Взять фотошоп и нарисовать.

Comments

[Frel]

Я прошу сверстать, а не скопировать дизайн!