使用CSS jquery或javascript的双弧形状

Question

如何创建这样的弧形：

使用CSS或jquery或javascript

Answer 1

你甚至不需要CSS / JS来绘制它。只需使用<svg>元素。

＆＃13;

＆＃13;

<svg width="270" height="120">
    <path
       d="M 49.155517,102.32765 C 127.54837,40.541934 209.51266,103.2205 209.51266,103.2205 l 0,0 C 259.33409,50.363364 259.15552,50.363364 259.15552,50.363364 126.68749,-56.114356 2.1861831,50.204194 2.1861831,50.204194 z"
       stroke-width="3"
       stroke="#A5423A"
       fill="none"
    />
</svg>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用SVG。您可以使用arc path command。

正如您的评论所述，您希望将内容放置在弧内并希望它们旋转。

文本或图片等内容可以放在svg中。 可以使用transform=rotate(..)实现轮换。

如果您想使用SVG制作更多动画，可以查看D3.js。如果你只是想创建一些弧，你可以自己做数学运算来计算SVG路径字符串。

Answer 3

@AlliterativeAlice是正确的。

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

所以我的解决方案使用弧线和线而不是Bezier曲线。

＆＃13;

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;