Как сверстать такой блок на css или canvas?

Question

[Артем Колчин]

Как можно сверстать такой блок адаптивно?
По сути была идея пунктиры положить и потом с помощью абсолюта расмещать шаги.
Но может тут через канвас будет лучше сделать? или мой вариант тут единственный?

Comments

[Ankhena]

или мой вариант тут единственный?

Вариантов тут заметно больше, чем "единственный".

Как можно сверстать такой блок адаптивно?

Для этого нужно знать, как оно должно меняться при адаптиве.

Вот , например, библиотечка https://github.com/anseki/leader-line

Answer 1

[ksnk]

Ну, если не найдутся css сектанты или svg- сектанты, то вот пример с канвасом

Answer 2

[sergski]

css-сектанты даже Джоконд рисуют, но по уму конвертировать в svg и добавить элегантных ховер-эффектов и анимации

Comments

[alexalexes]

Не могут нынче дизайнеры работать в блочной системе представления схем. Им кривые Безье и скруглённые углы подавай. Поэтому нужно извращаться с svg представлением.