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

Question

[WhatIsHTML]

Есть файл PSD, пока что не придумал как даже примерно его сверстать. Хотелось бы максимально просто и быстро, без джс и свг желательно.

Comments

[WhatIsHTML]

Егор Скороходов, ну оно то вроде как красиво, просто проблема в том, что нету этих полосок в свг.

Answer 1

[Sanches]

Простым dashed border'ом это не сделать. Без svg тут никуда.
https://codepen.io/abnmt/pen/JLWEga

UPD Вот последний вариант, даже с резиной ))
https://codepen.io/abnmt/pen/aYJprK

Answer 2

[Exploding]

Продолжая издевательство coderisimo, вдогонку прилетает еще одно место для отталкивания)))
https://codepen.io/Exploding2g/pen/eMvgae

UPD: Если dashed не подходит - есть еще border-image

Оффтоп:)

Мы с друзьями идем из кабака:
https://codepen.io/Exploding2g/pen/rdyyOd

Comments

[coderisimo]

Оффтоп - офигеть! ))))

[Exploding]

coderisimo, вместо пунктирных полосок)) Было бы веселей)))

Answer 3

[coderisimo]

Можно оттолкнуться от этого
https://codepen.io/coderisimo/pen/aYJpGE

Answer 4

[mr_boner]

Максимально просто - пнг кртинку задним фоном (без JS и svg).
Мне кажется, правильней будет svg.

Comments

[WhatIsHTML]

а если с свг, можно примеры?

[mr_boner]

да элементарно возьми в иллюстраторе сделай и сохрани в svg

Answer 5

[freeman0204]

Полоски фоном, этому блоку задать позишн релатив, а картинки и надписи это блоки тоже с позишн абсолют.