광선처럼 나오는 텍스트가있는 원을 만드는 방법

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를 사용하는 또 다른 방법은 자동으로 처리하는 것입니다.