Как сделать такую штуку?

Question

[persovt]

Помогите сделать такую штуку, где "01/04". Странная и не понятная форма, как делать, пытался сделать на "border", но не получилось из-за неаккуратности данного метода (неровный переход). Ну или хотя бы не сделать, а просто подсказку, какими методами это можно сделать

Comments

[Сергей Сергей]

Можно ли объединить 2 бэкграунда в одну фигуру, чтобы к ней применялась одна непересекающаяся тень?

[Антон Литвиненко]

Долбаные дизайнеры...

Answer 1

[RAX7]

Answer 2

[Ivan Bogachev]

Вариантов в целом много. Если пойти по пути псевдоэлементов с абсолютным позиционированием и аккуратного выравнивания, то получится что-то такое:

Answer 3

[Владимир Коротенко]

круг с z-index: 2
прямоугольник z-index: 3 в нем число
Все остальное css

Comments

[persovt]

так и делал
Но получилось вот так!

[Rerurk]

persovt, 04 в отдельный объект, уменьш шрифт и поднимите

[Владимир Коротенко]

persovt, стоп у вас круг пересекает границы. Я видимо ступил итак круг с бордюром, потом прямоугольник с бордюром, сверху круг с чернотой в границах первого круга. И в центре див с текстом