Как делается Merge или Union в css?

Question

[Stiff_Lucky]

Как можно сделать подобную верстку? Проблема в том, что нужно сохранить внутренние тени (глубину) у формы.
Самы простой вариант который вижу - png комплект который будет для крайних точек и в центре для новых точек (3 png).

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

Comments

[Антон Антон]

Проще всего инлайн svg и двигать центр добавляя ему классы

[Stiff_Lucky]

Антон Антон, Спасибо. попробую разобраться теперь, что это и с чем его есть

[Ankhena]

Stiff_Lucky, комплект png или svg, смотрите что меньше по весу выходит.

и в центре для новых точек (3 png)

Точка, конечно, одна, вне зависимости от формата. Положения разные.

Хотелось бы это реализовать css стилями без изображений.

Я люблю так делать, но в данном случае радость сомнительная. Я бы не стала.