Как такое сверстать?

Question

[godsplan]

У меня была идея сделать просто бордер ,но если бордер закругляется,то он сужается к его концу с боков и я не понимаю как это решить тогда.
Моя попытка: https://codepen.io/poylar/pen/YzrqzGm

Comments

[sergski]

почему бы пунктир не сделать в svg? остальное у вас уже есть

[godsplan]

sergski, а как привязать свг к блоку?

[sergski]

godsplane, просто 2 слоя наложите друг на друга

Answer 1

[Vyach Gor]

Comments

[godsplan]

Круто,но видно что криво :\

Answer 2

[Андрей Федоров]

https://codepen.io/aliencash/pen/rNGeNEP

Comments

[godsplan]

Ну а если я цифры вставлю внутрь то они будут перекрываться псевдоэлементом

[Андрей Федоров]

godsplane, а вы вставляйте с абсолютным позиционированием и z-index.

Answer 3

[profesor08]

Есть несколько вариантов:

1. Взять эту svg и вставить в свой html, поправить номера и все. На этом вся верстка этого блока окончена. В svg должны быть и правильный пунктир, и тени и цвета.
   
2. Попытаться сверстать кривое подобие на html и css. Результат как на картинке - недостижим. Примеры выше и вот этот (https://codepen.io/Profesor08/pen/XWedbmj), это прекрасно демонстрируют.
   
   
   

Comments

[godsplan]

я думаю и искал решение на свг, но для каждого отдельного блока, я сделал что-то такое https://codepen.io/poylar/pen/NWaNqbQ но там видны зазоры между блоками от которых я хз как избавиться.

[profesor08]

godsplane, скопируй svg прям из макета. Если скопировать не получается, попроси дизайнера. Если и так не получается, то экспортируй блок картинкой и вставь как картинку. Повторю тут верстать нечего, это просто картинка.

[godsplan]

profesor08, прям все блоки скопировать или вы имеете ввиду по одному элементу?

[godsplan]

profesor08, просто я их и скопировал но по одному и цифры там были Path, я их переделал под text

[godsplan]

profesor08,
Суть в том что весь блок выглядит вообще так, то есть к каждому кружку идет еще и текст

[profesor08]

godsplane, если числа то-же через path, то зачем страдать фигней? А текст это просто текст. Сверху 4 блока, снизу три.

Answer 4

[FrelFrloich]

Это не своевременно, но разве это не просто круги с цифрами и бефор афтер с бордерами?