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

Как сверстать такие круговые диаграммки, чтобы ими потом можно было управлять?
  • Вопрос задан
  • 1046 просмотров
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
SVG
<svg width="108" height="108">
<circle r="46" cx="54" cy="54" />
<circle style="stroke-dasharray:60% 140%" r="46" cx="54" cy="54" />
</svg>


svg {
  display: block;
  margin: 100px auto;
  width: 200px;
}
circle {
  fill: rgba(0,0,0,0);
  stroke: #eee;
  stroke-width: 16;
}
circle:nth-child(2n) {
  fill: rgba(0,0,0,0);
  stroke: #30bae7;
}


Лучше классы расставить, тем более, что диаграмм несколько.

https://jsfiddle.net/ry8aj50c/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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