Как бы вы это правильно сверстали?

Question

[sergey]

Есть фигура, а от нее стрелки с подписями в svg, все это адаптивится, до 768px, потом скрывается.
Мысль такая абсолютным позиционированием, но это не совсем правильно как я вижу. Псевдо-классами, но опять как это выстроить, что бы не ломалось. Может кто подобное делал, направьте на правильное решение. Спасибо.

Comments

[HamSter]

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

[sergey]

HamSter: в svg только стрелки, все остальное текстом и изображением, кроме того как я говорил текст и стрелки после 768 пропадут

[HamSter]

SM: ну тогда я бы старыми добрыми relative + absolute воспользовалась бы)

[sergey]

HamSter: я так и сделал уже, просто думал может чет правильнее есть

[Максим]

Круто ты работаешь :)

[sergey]

Максим: сроки горят

[Максим]

SM: давай теперь на тостере 100500 вопросов по каждой секции задай, как бы вы это сверстали (+ джсфидлл плиз).

[sergey]

Максим: вопрос был не о коде, а об идее реализации, вопрос давно закрыт

Answer 1

[Денис Инешин]

Я бы сделал 2 картинками в 2 слоя.
1. Нижний слой - JPG с людьми
2. Верхний слой - PNG c текстом и сносками

Вся эта конструкция вполне нормально будет адаптироваться с помощью background-size.
Не очень понятно зачем выносить эти сноски в отдельные элементы? Это же иллюстрация, а не блок новостей где текст будет меняться часто.

Comments

[sergey]

и наложить два слоя друг на друга, сделать верхний полностью прозрачный?

[Денис Инешин]

SM: да

[sergey]

Денис Инешин: ок благодарю, правда я уже успел спозиционировать все это, ну ничего переделаем.

[Максим]

SM: это можно решить относительным размером шрифтов. А лучше сделать вообще адаптивочку, и просто потом на телефоне не мельчить, а сделать 1. ... 2... 3... 4...