使用css将一个圆分成24个段

Question

我使用css创建了一个圆圈。现在我想把它分成24段。我怎么能用css执行此操作。帮我。 这是我创建圈子的代码：

<div class="circle"></div>
.circle{

            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: blue
            }

Answer 1

您可以使用可缩放矢量图形更轻松地执行此操作。

绘制圆圈的代码：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="150" cy="100" r="50" stroke="blue" stroke-width="2" fill="white"/>
</svg>

您可以绘制不同的线条，以便将圆圈分成若干段。

行代码：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>