带有CSS jquery或javascript的双圆弧形状

如何创建如下所示的圆弧形状：

---

使用CSS、jquery或javascript，您甚至不需要CSS/JS来绘制此图。只需使用

元素

---

您可以使用SVG实现这一点。有一个你可以使用的方法

正如您的注释所述，您希望将内容放置在弧内并使其旋转

文本或图像等内容可以放在svg中。 旋转可以通过

transform=rotate（..）

实现

---

如果你想用SVG做更多的动画，你可以看看。如果您只想创建一些圆弧，您可以自己计算SVG路径字符串。

@AlliterativeAlice是正确的

但是对于这个形状，我会使用两个圆弧，而不是很多C路径。 我也更喜欢使用相对路径而不是绝对路径

因此，我的解决方案使用圆弧和直线，而不仅仅是贝塞尔曲线

单凭CSS是不可能做到这一点的。考虑使用HTML5

canvas

元素：，并结合Javascript。我已经在使用canvas创建背景，但我需要8个这样的形状，带有自定义内容，它们都需要旋转。所以我真的认为使用CSS或javascript会更好。你也可以看看SVG。谢谢你，伙计，这是你自己做的，还是有某种生成器？我使用了一个名为绘制它的程序，然后将文件保存为SVG。然后，我在记事本++中打开文件以获取

标记信息。好的，我会试试看，因为我没有使用真正的形状。如果这样生成

A

曲线而不是使用

C

beziers，会更好。您需要保留半径比（rx/ry）否则，它将创建无与伦比的arcs@TimKrul它几乎总是会创建不平行的圆弧，因为起点和终点对圆弧的显示方式有发言权。修正了，所以它看起来像我能得到的一样平行。你需要以相同的比例减少底部圆弧的半径，并减少它的直线长度命令，或10。如下所示：若顶部圆弧的半径为50，则使底部圆弧为40。这里可以计算线的长度，但如果它是这样的话，我该如何计算呢：？为了真正正确，我认为它应该减少10*sqrt（2）。然后我们会得到一个真正平行的弧。