Как адаптивно сверстать «стрелочки» от одного блока, к другому?

Question

[Andrew E]

Привет всем! Подскажите как можно сверстать эти пунктирные "стрелочки" от одного блока, к другому? Да еще и адаптивно.

Пока кроме фоновой картинки, под разные размеры экрана ничего в голову не приходит. Были мысли сделать псевдоэлементами и раскидать позиционированием, но этот вариант только для статичной подходит.



В общем комрады, накидайте идей пожалуйста

Comments

[Ankhena]

https://github.com/anseki/leader-line

[Andrew E]

Ankhena, интересная штука, сохранил себе спасибо. Но не совсем то что нужно в моей ситуации. Не понятно как стилизовать, позиционировать, адаптировать и тут это скорее как UI-элемент, а не полноценный указатель.

[Ankhena]

Andrew E, можете разбить блок гридами.
Можете абсолютами.
Можете через bg.
Можете засунуть все в SVG вместе с текстом (как в векторном виде, так и тегом text)

Для принятия решения важно, что за контент в блоках, может ли он меняться, может ли (должен ли) у него меняться размер шрифта, на сколько значим этот текст, как всё это дело должно вести себя при адаптиве и т.д.

[Lector]

Дать люлей дизайнеру) Иногда они просто хрень делают. После того как в академии преподавал уроки верстки дизайнерам(так по программе у них было) сразу рисовали адекватные дизайны без всяких плюшек