letehaha
@letehaha
Вникаю вo front-end

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

Собственно, вопрос в заголовке)
position: absolute и after c before я рассматривал, но ведь при адаптивности там будет полнейшая дичь твориться.

ef2fad735a074252a49420c5cbf9307b.png
  • Вопрос задан
  • 246 просмотров
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
20160929-234102.png

Для каждой точки создаем прямоугольник. Таких размеров, чтобы один угол находился в центре точки, а сам прямоугольник в центре блока с картинкой. Размеры в процентах. Таким образом при изменении размеров картинки относительные координаты точек будут соблюдены и они будут располагаться в нужных местах.
Далее внутри каждого прямоугольника создаем непосредственно точку.

Блоки с текстом располагаем в обычных дивах по бокам картинки.

Остается только вычислить положение точки и положение соответствующего ей прямоугольника с текстом и провести одну или две линии.

Задача не сказать, чтобы сложная.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@void01
я бы все делал дивами с 2 бордерами и after c соответствующим позиционированием для булита
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы