如何使用CSS3制作弧形？

Question

我正在尝试使用纯CSS实现以下外观：

每个白色弧线都是不同的元素，例如跨度。 我知道我们可以使用CSS制作圆形，但是如何将其变成圆弧形呢？

Answer 1

使用以下HTML：

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

和CSS：

#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;
}

 #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; } 

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

JS小提琴演示 。

Answer 2

SVG方法：

我建议您使用SVG绘制以下形状：

在下面的示例中，我使用了SVG的path元素绘制圆弧。 该元素采用单个属性d描述形状结构。 d属性需要一些命令和相应的必要参数。

我只使用了2条路径命令：

• M命令用于将笔移动到特定点。 该命令有两个参数x和y ，通常我们的路径以该命令开头。 它基本上定义了我们绘图的起点。
• A其用于绘制曲线和圆弧命令。 该命令采用7个参数绘制圆弧/曲线。 此命令的详细说明在此处 。

屏幕截图：

有用的资源：

• 规格
• MDN

工作示例：

 svg { width: 33%; height: auto; } 

 <svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg"> <defs> <g id="arcs" fill="none" stroke="#fcfcfc"> <path d="M80,80 A100,100,0, 0,0 80,220" stroke-width="4" /> <path d="M90,90 A85,85,0, 0,0 90,210" stroke-width="3.5" /> <path d="M100,100 A70,70,0, 0,0 100,200" stroke-width="3" /> <path d="M110,110 A55,55,0, 0,0 110,190" stroke-width="2.5" /> </g> </defs> <rect x="0" y="0" width="300" height="300" fill="#373737" /> <use xlink:href="#arcs" /> <use xlink:href="#arcs" transform="translate(300,300) rotate(180)" /> </svg>