html - テキストが光線のように出てくる円を作成する方法

Question

光線が出ている円を作りたいのですが... 約24個です。各光線は単語を含む長方形です。つまり、基本的にはウェブサイトのメニューですが、ページの横にある列ではなく、ここでは円を囲んでいます。もちろん、各長方形は他の長方形から均等に分離されており、太陽のように見えるものを形成しています。

HTML/CSSでそれを行う方法を誰かに教えてもらえますか? 必要に応じて、Javascript と JQuery も使用できます。

Answer 1

このフィドルのようなもの？

フィドルでは、javascript ループを使用してすべての角度を設定しますが、事前に光線の数がわかっている場合は静的 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 を使用するもう 1 つの優れた点は、それが自動的に処理されることです)