如何用 CSS3 制作弧形？答案

【问题标题】：How to make arc shapes with CSS3?如何用 CSS3 制作弧形？
【发布时间】：2017-02-24 21:37:31
【问题描述】：

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

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

【问题讨论】：

这是一个 JFiddle，可能会引起您的兴趣 jsfiddle.net/tupCW
stackoverflow.com/a/4699096/684932 (jsfiddle.net/yijiang/nDxYJ)
这都是错误的。为此，您应该使用 SVG 或 Canvas。
@Mircea 我已经考虑了一两个小时，但我根本没有想到 SVG。感谢您的想法:)

【解决方案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 Fiddle demo.

【讨论】：

哦，非常感谢；我很高兴能帮上忙！ =)
@DavidThomas 你做了一个漂亮而有创意的把戏，这让我觉得 ;)
@RaphaelDDL：谢谢！我意识到，在看到您的编辑后，我忘记将我的演示添加到答案中（尽管使用它来测试我在答案中发布的代码......d'oh！），编辑添加我自己的（终于..！）
+1 这是带有背景颜色的version of the demo，以使正在发生的事情更加明显。出于好奇，这里的another demo 展示了在定义border-left 和border-right 时如何实现非常不同的效果，而不是定义border 并制作顶部和底部边框transparent。
Np。有一个演示总是很好 :) @Matt 我正在尝试执行此代码并以您展示的不同效果结束，通过这个奇怪的渐变圆角边框

【解决方案2】：

SVG 方法：

我建议你使用 SVG 来绘制这样的形状：

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

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

M 命令用于将笔移动到特定点。这个命令有两个参数x 和y，通常我们的路径以这个命令开头。它基本上定义了我们绘图的起点。
A 命令用于绘制曲线和圆弧。该命令需要 7 个参数来绘制圆弧/曲线。这个命令的详细解释是Here。

截图：

有用的资源：

工作示例：

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>

【讨论】：