Как сверстать круги с линиями?

Здравствуйте быть может сможите помочь с напровлением реализации версти вот таких кругов с линиями prntscr.com/7fnure , как с этим всем быть?
  • Вопрос задан
  • 1927 просмотров
Решения вопроса 5
agmegadeth
@agmegadeth
Веб-разработчик в дизайн студии
Круги абсолютно позиционировать - верстать обычными дивами с border-radius: 50%;
Линии - тоже дивы с абсолютным позиционированием с нужным transform(rotate(Xdeg));
Ответ написан
IonDen
@IonDen
JavaScript developer. IonDen.com
Как всегда рекомендую для этих целей использовать D3.js, который отлично умеет строить такие штуки. Причем динамически! И обновлять хоть несколько раз в секунду, например: bl.ocks.org/mbostock/4062045

Воспользовавшись HTML+CSS вы конечно сможете сверстать такое, но это будет жутко фиксированная конструкция, внести изменения в которую будет уже не реально. Тогда уж проще картинкой вставить.
Ответ написан
Ronnie_Gardocki
@Ronnie_Gardocki
Я у мамы фронтендщик.
Если хотите красиво презентовать, то совершенно точно свг. Ибо можно будет классно анимировать отрисовку.
Ответ написан
Комментировать
NTP
@NTP
Алфавитный быть во всем должен порядок!
Можно через canvas или svg. Второе предпочтительнее.
Ответ написан
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
Ради интереса попробовал обойтись без position:absolute. Не получилось... А с ним получилось.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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