AleksandrB
@AleksandrB
Совсем недавно вывел "Hello world"

Как сделать разделенный круг?

Задача: сделать круг такого вида:
5de18bc7e6c15326640429.png

Все должно быть на css/html, цифры будут меняться.

Что пытался: брал блок, в него совал 4 блока, задавал им бордеры, поворачивал весь блок на 45, далее каждое число поворачиваю на -45. Но из-за разных размеров цифр бордеры не сходятся
5de18d2dc1f06993012698.png
Пробовал несколько моноширинных шрифтов, они имеют разные размеры символов.
Подскажите, как это лучше реализовать, возможно, знаете нужный шрифт (от него только цифры нужны, поэтому поддержка кириллицы не необходима)
  • Вопрос задан
  • 213 просмотров
Решения вопроса 1
Get-Web
@Get-Web Куратор тега CSS
Front-End Developer
Например так:
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Очевидный SVG. Можно по SVG для каждого сектора.

Все остальные способы гемор и костыли в сравнении с SVG. Но можно, конечно, сделать ромб и прифигачить через ::after полукруг, чтобы сделать сектор, потом их увязать вместе...
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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