如何用CSS 3制作弧形?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (362)

我试图用纯CSS来实现下面的样子:

每个白色圆弧是不同的元素,比如说跨度。我知道我们可以用css来制作圆形,但是怎样才能变成弧形的形状呢?

提问于
用户回答回答于

使用以下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演示...

用户回答回答于

SVG方法:

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

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

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

  • M命令用于将笔移动到特定点。这个命令需要2个参数xy通常我们的路径以这个命令开始。它基本上定义了我们绘图的起点。
  • A用于绘制曲线和弧线的命令。该命令需要7个参数来绘制弧/曲线。。

截图:

有用的资源:

示例:

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>

扫码关注云+社区

领取腾讯云代金券