在CSS 3中用圆弧画一个圆

我想在CSS 3中画一个带弧的圆，这样我有5个点，每个点都可以是一个链接。我之所以要使用圆弧，是因为我想在用户悬停在某个点上时为圆弧设置动画。例如，如果使用将鼠标悬停在第二个点上，则连接第一个点和第二个点的直线/圆弧具有填充动画。 有没有一种方法可以用CSS来实现，还是使用SVG更好

.circle{
位置：相对位置；
宽度：530px；
}
多特先生{
位置：绝对位置；
宽度：10px；
高度：10px；
边界半径：50%；
背景：#ccc；
}
.dot1{
排名：0；
左：50%；
转换：翻译（-50%，-50%）；
}
.dot2{
最高：34.5%；
左：2%；
转换：翻译（-50%，-50%）；
}
.dot3{
最高：34.5%；
左：98%；
转换：翻译（-50%，-50%）；
}
.dot4{
最高：90%；
左：21%；
转换：翻译（-50%，-50%）；
}
.dot5{
最高：90%；
左：79%；
转换：翻译（-50%，-50%）；
}

---

您可以使用svg元素，而不是使用div作为点。或者，您可以使用div

我正在计算主圆上点的位置，并使用这些点的坐标来绘制圆弧

您可以尝试使用点的坐标重新绘制线

请阅读代码中的注释

var SVG\u NS=”http://www.w3.org/2000/svg";
var svg=document.querySelector（“svg”）；
设点=[]；
设弧=[]；
设c={x:265，y:265}；//主圆的中心
设r=263；//主圆的半径
设n=5//点数
设步长=（2*Math.PI）/n；//每个点之间的角度
类点{
建造师（一）{
这个.p={}；
这个.p.cx=c.x+r*Math.cos（i）；
this.p.cy=c.y+r*Math.sin（i）；
这个p.r=5；
此p.fill=“红色”；
this.el=drawSVGelmt（this.p，“圆圈”，圆圈）；
}
}
//在点阵列上创建并推送新点
for（设i=-Math.PI/2；i<（3*Math.PI）/2；i+=step）{
点。推（新点（i））；
}
for（设i=0；i

svg{border:solid}

---

谢谢你，这是个好主意，我会调整一下，然后再处理：）