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

Question

[sasha_ka]

Здравствуйте быть может сможите помочь с напровлением реализации версти вот таких кругов с линиями prntscr.com/7fnure , как с этим всем быть?

Answer 1

[Андрей Гончаров]

Круги абсолютно позиционировать - верстать обычными дивами с border-radius: 50%;
Линии - тоже дивы с абсолютным позиционированием с нужным transform(rotate(Xdeg));

Comments

[sasha_ka]

Спасибо Андрей!так и предпологал но думал быть может есть другое решение

Answer 2

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

Как всегда рекомендую для этих целей использовать D3.js, который отлично умеет строить такие штуки. Причем динамически! И обновлять хоть несколько раз в секунду, например: bl.ocks.org/mbostock/4062045

Воспользовавшись HTML+CSS вы конечно сможете сверстать такое, но это будет жутко фиксированная конструкция, внести изменения в которую будет уже не реально. Тогда уж проще картинкой вставить.

Comments

[sasha_ka]

Спасибо Денис! буду ознакамливаться

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

sasha_ka: начните с этой статьи: frontender.info/vvedenie-v-djs и этой книги: chimera.labs.oreilly.com/books/1230000000345/ch01.html

Answer 3

[Nikolay Talanov]

Если хотите красиво презентовать, то совершенно точно свг. Ибо можно будет классно анимировать отрисовку.

Answer 4

[Поликарп Занудский]

Можно через canvas или svg. Второе предпочтительнее.

Comments

[sasha_ka]

Спасибо!

Answer 5

[Евгений Петров]

Ради интереса попробовал обойтись без position:absolute. Не получилось... А с ним получилось.

Comments

[sasha_ka]

Спасибо! сделано как по мне круто, Вы мастер верстки.Я же пошел другим путем и реализовал послушав советы через svg в частности snapsvg.io вот что получилось codepen.io/anon/pen/yNXQNW .