CSS jquery 或 javascript 双弧形

Question

如何创建这样的弧形：

与CSS或jquery或javascript

Answer 1

你甚至不需要 CSS/JS 来画这个。只需使用 <svg> 元素。

<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>

Answer 2

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

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

文本或图像等内容可以放在 svg 中。可以用transform=rotate(..)实现旋转。

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

Answer 3

@AlliterativeAlice 是正确的。

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

所以我的解决方案使用了圆弧和直线，而不仅仅是贝塞尔曲线。

<svg width="300px" height="300px" viewBox="0 0 100 100">
  <path d="m 10,60 
          a 50 50 0 0 1 80,0
          l -10,10
          a 40 40 0 0 0 -60 0Z" stroke-width="1" stroke="#A5423A" fill="none" />
</svg>

CSS jquery 或 javascript 双弧形

Double arc shape with CSS jquery or javascript

javascript

css

jquery

svg

css-shapes