Html 如何使用CSS3制作圆弧形状？

我试图通过纯css实现以下外观：

---

其中每个白色弧都是一个不同的元素，比如跨度。我知道我们可以使用css制作圆形，但是如何将其转换为弧形形状？

使用以下HTML：

<div id="arcs">
    <div>
        <div>
            <div>
                <div></div>
            </div>
        </div>
    </div>
</div>

#弧div{
边框：2倍实心#000；
/*弧的“笔划”*/
显示：内联块；
最小宽度：4em；
/*最内层元素的宽度*/
最小高度：4em；
/*最里面的元素的高度*/
填充：0.5em；
/*每个弧之间的间距*/
边界半径：50%；
/*用于使元素“圆”*/
边框顶色：透明；
/*隐藏顶部边界*/
边框底色：透明；
}

SVG方法： 我建议您使用SVG绘制这样的形状：

在下面的示例中，我使用SVG的

path

元素绘制了一条弧。该元素采用单个属性

d

来描述形状结构<代码>d属性接受一些命令和相应的必要参数

我只使用了两个路径命令：

• M

  命令用于将笔移动到特定点。这个命令有两个参数

  x

  和

  y

  ，我们的路径通常从这个命令开始。它基本上定义了我们绘图的起点

• 用于绘制曲线和圆弧的

  命令。此命令使用7个参数绘制圆弧/曲线。有关此命令的详细说明，请参见

屏幕截图：

有用资源：

工作示例：

svg{
宽度：33%；
高度：自动；
}

这里有一个JFiddle，可能会引起人们的兴趣（）这完全是错误的。您应该使用SVG或Canvas来实现此目的。@mirca我已经思考了一两个小时，但我根本没有想到SVG。谢谢你的想法：）哦，非常感谢你；我很高兴能帮上忙！=）@大卫托马斯：你做了一个美丽而有创意的把戏，这让我觉得；）@拉斐尔德：谢谢！在我看到你的编辑后，我意识到我忘记了将我的演示添加到答案中（尽管使用它来测试我在我的答案中发布的代码…哦！），编辑后添加了我自己的内容（最后…！+1这里有一个带有背景色的示例，以使发生的事情更加明显。好奇的是，这里展示了定义

左边框

和

右边框

，而不是定义

边框

并使顶部和底部边框透明.Np时，如何实现非常不同的效果。有一个演示总是好的：）@Matt我试着做这段代码，结果得到了你展示的不同效果，有一个奇怪的渐变圆形边框

#arcs div {
    border: 2px solid #000; /* the 'strokes' of the arc */
    display: inline-block;
    min-width: 4em; /* the width of the innermost element */
    min-height: 4em; /* the height of the innermost element */
    padding: 0.5em; /* the spacing between each arc */
    border-radius: 50%; /* for making the elements 'round' */
    border-top-color: transparent; /* hiding the top border */
    border-bottom-color: transparent;
}