Как сделать круглый календарь html+css3+js?

Question

[ngame]

Суть вопроса:
каким способом сделать клендарь, в виде круга, чтобы его элементы можно было стилизовать.
Пример на фото (только вместо месяцев нужно отображать дни - 31,30, 28/29):

Answer 1

[Андрей Саврасов]

Цветной задний фон 2 варианта:
1. Картинка круг с секторами
2. Нарисовать на css 31 квадрат повернуть их через rotate в абсолютном позиционировании. Поместить эти квадраты внутрь блока с заданными width и height и с overflow: hidden. Добавить блоку обёртки border-radius: 50% и всё.

Все числа абсолютным позиционированием, не забыть про z-index.

Comments

[ngame]

Вариант хороший, но есть проблема - в div края становятся "ступеньками", особенно заметно в верхней части, где они имеют закругление.
Спасибо, за вариант! Сейчас смотрю в сторону svg т.к. заказчик не хочет отходить от макета..

[Андрей Саврасов]

ngame: так а зачем вам края, делайте в нахлёст