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

Question

[Лобстер]

Всем привет. В промежутке между кругами полоска с точками и стрелочка. =) как такое сделать?

Comments

[WhatYouDoing]

добавляй класс,и на этот класс вешай псевдо элемент after

[Лобстер]

О_о это я знаю. Я вот понять не могу как мне из точек полоску сделать

Answer 1

[Сергей delphinpro]

https://jsfiddle.net/zL4y4myb/
https://jsfiddle.net/zL4y4myb/1/ круглые

Comments

[Лобстер]

Воу! Спасибо. Я и не знал что в линейном градиенте можно так =) Нужно будет про него еще почитать. Спасибо большое

[Виталий Киренков]

Хороший вариант, но можно еще мальца оптимизировать. Див сделать кругом, афтер - пунктир, бефор - треугольник

[Лобстер]

Виталий Киренков: О_о я не могу это представить в голове.

[Виталий Киренков]

Лобстер: https://jsfiddle.net/zL4y4myb/2/

[Сергей delphinpro]

Виталий Киренков: Ваш вариант тоже не идеален =)
Там положение стрелки зависит от двух размеров - диаметр круга и длины стрелки. Можно уменьшить зависимость до одного - длины стрелки
left: 100%; /* всегда диаметр круга */
margin-left: 100px; /* длина стрелки */

[Сергей delphinpro]

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

[Виталий Киренков]

Сергей: это уже детали =) главное задать вектор для размышления =)

Answer 2

[Виталий]

1. картинкой
2. если надо резина и css - точки, как border: dotted , стрелку как CSS shape

Comments

[Лобстер]

Да но dotter он же прямоугольный, а точки круглые. я тоже рассматривал этот вариант, но круглых точек там нет, а картинкой так не хочется делать =( Оно то конечно не видно будет, но всё же

[Виталий]

Лобстер: если 1px закрасить, то это будет квадрат , точку нельзя нарисовать 1*1px )
Если там точка , то это пару пикселей и проще просто залить через backgrodund-image картинкой точки