Пять кружков соединённых пунктиром. Как сверстать блок?

Question

[Андрей Невский]

Коллеги, прошу поделиться мыслями как сверстать такой блок:


Как сделал я: Задал блоку position: relative, и фиксированную высоту, ширину 100%. Кружкам задал размеры (каждому свой, они все разные). И с помощью абсолютного позиционирования разместил где нужно. Пунктир фоном вставил. Смотрится неплохо) Но при сужении экрана в какой то момент контейнер уменьшается и получается такая картина:


Выход вижу лишь в уменьшении и подгонке кружков под разные ключевые размеры экрана, используя медиа запросы. Но учитывая, что у всех кружков разные размеры, получится очень много строчек кода.
А как бы вы сверстали такой блок?

Comments

[Виталий Першин]

А что вам мешает с помощью позиционирования на нужных экранах изменить им места? Вместо 3-х рядом поставьте 2 рядом и один снизу, включите фантазию. В мобильных уже возможно один под одним или максимально уменьшить 2 в ряд возможно даже вообще спрятать, если информация не очень значима.

[Андрей Невский]

Виталий, с изменением мест расположения понятно, но в итоге всё равно получится много строк кода.

Answer 1

[RAX7]

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

Comments

[Андрей Невский]

Спасибо, работает как надо!

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

[RAX7]

Андрей Невский, используй значения в процентах для размеров иконки и её позиции top/left. Можно еще кружок сделать отдельным элементом и положить иконку в него, тогда позиция иконки будет не зависеть от радиуса окружности, по размеры придется задавать либо фиксированными (px) либо относительно вьюпорта (vw). Обновил пример на кодпене.