使用css制作弧形

Question

我是新手。我想制作一个与给定here类似的时钟。但是他们使用了图像。相反，我想使用 ARC 。有谁知道，我们怎样才能制作一个弧形，那也只使用css？考虑一个我必须制作15度弧的例子。非常感谢任何建议。

提前致谢.....

Answer 1

我建议您使用SVG执行此操作。标记相当简单，但你需要留意的是，有四种不同的规则会影响两个端点的哪一侧产生弧线的凸起，如果凸起会试图采取“短路”或具有给定半径的“长路”。

这是一个例子。使用这样的样式表：

.arc{
    fill:tan;
    stroke:red;
    stroke-width:4px;
}

结合像这样的svg路径：

<svg width="100" height="100">
    <path d="M 10,40 A 50,50 0 0 1 90,70"/>
</svg>

简而言之，上例中的命令是

• M（带绝对坐标的移动模式）
• x，y（在这里开始弧）
• A（具有绝对坐标的圆弧模式）
• r1，r2（弧线绕过的椭圆的两个半径。对圆圈使用相同的值两次）
• z旋转（该椭圆的旋转.0不旋转）
• 大弧旗（见下面的小提琴链接）
• 扫描旗帜（见下面的小提琴链接）
• x，y（弧将结束）

我做了这个小提琴演示了两个旗帜在运动中的所有不同组合，这有助于我决定使用哪些旗帜。 http://jsfiddle.net/rgbk/avpye8nm

W3C文档在这里：http://www.w3.org/TR/SVG11/paths.html#PathDataEllipticalArcCommands他们将z旋转描述为“x轴旋转”，这是错误的。

Answer 2

它必须是CSS吗？或者你可以使用HTL5画布吗？

http://www.w3schools.com/tags/canvas_arc.asp

然后你可以使用那个画布来做动画，而不是使用CSS动画......