Как верстать элементы инфографики в HTML?

Question

[Сергей]

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

• Склеить силуэт и линии и вставить одной .png. Списки подогнать под картинку.
  
• Сделать линии псевдоэлементами списков
  
  

Подскажите наиболее верный с точки зрения резиновой верстки.
Спасибо.

Comments

[shmatuan]

Оба варианта под адаптивность не подходят)
Лучше уже канвасом всё сделать

Answer 1

[Beliyadm]

я бы сделал для блоков типа "костные ткани" враппер, внутри абсолютно позиционированных блоков (можно и одним обойтись) для которых добавить псевдо до\после для горизонтальной\вертикальной линии
Для каждого блока разные параметры длины\отступов и для базовых медиа точек в стилях проставить свои значения
Либо SVG, но это и сложнее и дольше.

Либо вообще одной картинкой с параметром background-size:cover
Будет не очень на совсем мобильных (от 400 пкс и ниже) но тоже как вариант вообще без геморроя

Comments

[Алексей]

Я за SVG

Answer 2

[Максим]

jsfiddle.net/x2tLk07d это баловство но я показываю просто для примера на что способен SVG для реального примера можно отрисовать идеально

Answer 3

[xmoonlight]

Нужен "бутерброд" (снизу вверх, к пользователю):
1. Человек и линии - SVG. ("подложка")
2. Блоки надписей (с круглыми пиктограммами) - контейнер DIV'ов. (основной текстовый контент)

Порядок создания:
1. Начинаем с п.2 (создаём контейнер DIV'ов с надписями внутри), т.к. нам нужен размер SVG на основе контейнера DIV.
2. Создаём SVG (точно ПОД контейнером DIV'ов с той же позицией и того же размера).
После того, как это сделано - динамически создаём соединительные линии используя координаты соединительных точек блока-человека и блоков-надписей (все вычисления и прорисовка линий на SVG - через JS).