Html 如何制作一个；“弯曲矩形”；在SVG中？

我有一个项目，我正在工作，这需要我做一个圆形导航按钮，看起来像周围的铁人的东西下面图片酒吧。我可以画简单的形状，也可以很好地遵循教程，但我不知道如何用下图中的曲线形状绘制这些条

我已经包括了一个剪辑路径示例，但我认为SVG是我需要做的

HTML

---

是的，这里的答案是SVG。基础形状：

<svg version="1.1" baseProfile="full" width="50" height="50" xmlns="http://www.w3.org/2000/svg">
  <path d="M 50 0 A 50 50 0 0 0 14.6 14.6 L 28.79 28.79 A 30 30 0 0 1 50 20 Z"></path>
</svg>

---

这将使用此处描述的

路径

元素和一点三角法构建形状。

首先，我创建一个线段（路径）。然后我用旋转的方式重复使用它

const SVG\u NS=http://www.w3.org/2000/svg';
常量SVG_XLINK=”http://www.w3.org/1999/xlink";
常数deg=180/数学π；
设R=50；//外半径
设r=35；//内半径
设A=2*Math.PI/7；//线段+空间的角度
设a=2*a/3；//线段的角度
让path=document.createElements（SVG_NS，'path'）；
设p1={x:0，y:-R}
设p2={
x:R*Math.cos（a-Math.PI/2），
y:R*Math.sin（a-Math.PI/2）
}
设p3={
x:r*Math.cos（a-Math.PI/2），
y:r*Math.sin（a-Math.PI/2）
}
设p4={
x:0,，
y:-r
}
设d=`M${p1.x}，${p1.y}
A${R}，${R}0,1，${p2.x}，${p2.y}
L${p3.x}，${p3.y}
A${r}，${r}0,0，${p4.x}，${p4.y}
L${p1.x}，${p1.y}Z
`;
setAttributeNS（null，“d”，d）；
setAttributeNS（null，“id”，“arc”）；
defs.appendChild（路径）；
for（设i=0；i<7；i++）{
let use=document.createElements（SVG_NS，'use'）；
use.setAttributeNS（SVG_XLINK，“XLINK:href”，“弧”）
use.setAttributeNS（null，“fill”，“gold”）；
use.setAttributeNS（null，“transform”，`rotate（${i*A*deg}）`）；
appendChild（使用）；
}

哇，谢谢你的详细解释！我会研究和挑选你提供的代码；我最好通过逆向工程来提高我的理解力。再次感谢@完美的答案。您的代码可以用作任意数量段的生成器。您还可以更改笔划和间隙的长度，以获得几何精确的分段非常感谢您的输入，这正是我要做的！

.button {
    background: radial-gradient(circle at 50% 160%,transparent 45%,red 44.5%,red 85%,transparent 85%);
        -webkit-clip-path: polygon(5% 0, 100% 0, 65% 90%, 35% 90%);
        clip-path: polygon(20% 0, 80% 0, 65% 90%, 35% 90%);
}

<svg version="1.1" baseProfile="full" width="50" height="50" xmlns="http://www.w3.org/2000/svg">
  <path d="M 50 0 A 50 50 0 0 0 14.6 14.6 L 28.79 28.79 A 30 30 0 0 1 50 20 Z"></path>
</svg>