Как создать круг с текстом, исходящим из него, как лучи

Question

Я хотел бы иметь круг с лучами, исходящими из него ... Около 24 из них. Каждый луч является прямоугольником со словом в нем. Таким образом, это в основном меню на веб-сайте, но вместо того, чтобы находиться в столбце сбоку страницы, здесь он находится вокруг круга. Каждый прямоугольник равномерно отделен от других, конечно, образуя нечто похожее на солнце.

Может ли кто-нибудь показать мне, как я могу это сделать с помощью HTML/CSS? Javascript и JQuery могут использоваться, если это необходимо.

Answer 1

Нечто вроде this fiddle?

В скрипке я использую яваскрипт цикл, чтобы установить все углы, но это также может быть статичным CSS, если вы знали заранее, сколько лучей было бы:

.ray { 
    position: absolute; 
    left: 50%; 
    width: 200px; 
    top: 40px; 
    bottom: 40px; 
    padding-left: 10px; 
    transform-origin: 0px 50%; 
} 

#ray1 { 
    transform: rotate(0deg); 
} 

#ray2 { 
    transform: rotate(72deg); 
} 
... 

(естественно, для вещественно код мира, который вы хотите использовать префиксы -webkit и т. д. для свойств преобразования, а другой тонкости использования jquery заключается в том, что он имеет дело с этим автоматически)