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

Question

[Александр]

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


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

Что пытался: брал блок, в него совал 4 блока, задавал им бордеры, поворачивал весь блок на 45, далее каждое число поворачиваю на -45. Но из-за разных размеров цифр бордеры не сходятся

Пробовал несколько моноширинных шрифтов, они имеют разные размеры символов.
Подскажите, как это лучше реализовать, возможно, знаете нужный шрифт (от него только цифры нужны, поэтому поддержка кириллицы не необходима)

Comments

[ildar-meyker]

А зачем цифры располагать именно внутри тех самых блоков?

Answer 1

[Виталий Першин]

Например так:

Answer 2

[Алексей Николаев]

Очевидный SVG. Можно по SVG для каждого сектора.

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