Как сделать круговую диаграмму на чистом CSS?

Хочу сделать такую:
5eedd7cd91b64d47999d5dc6903fb118.png
Но проблема в том что, не могу сделать синюю полоску вокруг серой.
Серая - это пустая диаграмма (0%)
Синяя - это уже с данными например (27%, 84% или 47%....)

Update: Прошу прощения, видимо я не правильно сформулировал свой вопрос. Я сделал серую диаграмму, но проблема в том что, теперь хочу классом нанести на нее синюю. Вот в чем проблема. Никак не выходит.
Допустим есть:
<div class="circle">37%</div>
А теперь на нее еще нужно на нести класс, что бы вышло так как на картинке.
  • Вопрос задан
  • 19326 просмотров
Решения вопроса 2
Symphony
@Symphony Куратор тега CSS
Если делать как Вы хотите, т.е. выставлять произвольный процент в такую конструкцию
<div class="circle">37%</div>
Как вариант можно сделать с помощью svg
Ответ написан
littleguga
@littleguga
Не стыдно не знать, а стыдно не интересоваться.
Пригласить эксперта
Ответы на вопрос 1
Deodatuss
@Deodatuss
или 100 классов сгенеренных препроцессором с использованием треугольников на css или svg или спрайт на 100 картинок))
Ответ написан
Ваш ответ на вопрос

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

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