Html 如何使用 CSS3 制作圆弧形状？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16470412/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make arc shapes with CSS3?
提问by Ilja
I'm trying to achieve following look, with pure css:
我正在尝试使用纯 css 实现以下外观：
Where each white arc is a different element, say span. I know we can make round shapes with css, but how can it be turned into arc sort of shape?
每个白色弧线是一个不同的元素，比如跨度。我知道我们可以用 css 制作圆形，但是如何将其变成弧形呢？
回答by David says reinstate Monica
With the following HTML:
使用以下 HTML：
<div id="arcs">
<div>
<div>
<div>
<div></div>
</div>
</div>
</div>
</div>
And the CSS:
和 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>回答by Mohammad Usman
SVG Approach:
SVG方法：
I would recommend you to use SVG to draw such shapes:
我建议你使用 SVG 来绘制这样的形状：
In the example below I've used SVG's pathelement to draw an arc. This element takes single attribute dto describe the shape structure. dattributes takes a few commands and corresponding necessary parameters.
在下面的示例中，我使用了 SVG 的path元素来绘制圆弧。该元素采用单一属性d来描述形状结构。d属性需要一些命令和相应的必要参数。
I've used only 2 path commands:
我只使用了 2 个路径命令：
Mcommand is used to move the pen to a specific point. This command takes 2 parametersxandyand usually our path begins with this command. It basically defines starting point of our drawing.Acommand which is used to draw curves and arcs. This commands takes 7 parameters to draw an arc / curve. A detailed explanation of this command is Here.
M命令用于将笔移动到特定点。这个命令有 2 个参数x，y通常我们的路径以这个命令开始。它基本上定义了我们绘图的起点。A用于绘制曲线和圆弧的命令。此命令需要 7 个参数来绘制圆弧/曲线。这个命令的详细解释是这里。
Screenshot:
截屏：
Useful Resources:
有用的资源：
Working Example:
工作示例：
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>