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

Question

[Максим]

Как сверстать такую линию? Не картинкой.. чтобы вне зависимости от контента все точки и линии были на своих местах

Answer 1

[Андрей Б.]

https://jsfiddle.net/s6opkvjk/

Answer 2

[xtala zen]

Самый простой путь это воспользоваться возможностями SVG. Скорее всего вам предложат еще пару способов с помощью бордеров, скругленных углов и других изворотов CSS3, но это будет не однозначное решение, которое еще не известно как поведет себя при масштабировании окна браузера, а так же при использовании каких-то нестандартных браузеров. Т.е может пострадать кроссбраузерность.

Answer 3

[romy4]

border-radius'ом

Comments

[Максим]

гениально

[romy4]

Максим: всё до безобразия просто.

[Максим]

romy4: это был сарказм.. углы я знаю что делаются бордер радиусом, это и пню понятно

[romy4]

Максим: а. если самому понятно, то зачем спрашивать.
б. смотрел на сайте через фаербаг?

[Максим]

romy4: саму линию как так нарисовать, чтобы вне зависимости от контента все точки и линии были на своих местах

[Максим]

romy4: это в фотошопе

[romy4]

Максим: все линии - это бордеры каких-то слоёв. точки в данном случае могут быть картинками, которые смещены относительно левого края слоя на половину своей длины влево. или (опять же) слои с border-radius и нулевой шириной

[Stalker_RED]

romy4: Точки могут быть маркерами списка.

[Ankhena]

Максим: линия бордером, точки - маркеры списка либо before, как рекомендуют выше, сдвиг этого списка так, чтобы маркры встали на линию. Сами точки либо картинки, либо радиальные градиенты, во втором случае использовать before.