Html 如何在边界侧创建带有链接的圆

我试着画一个像这样的圆。我可以在小提琴上演奏，但问题是我需要每个橙色的边作为一个链接，而我不能用边框。如果有人能帮我，我将非常感激

#圆圈{
宽度：200px；
高度：200px；
边界半径：50%；
背景：绿色；
}
#包围{
宽度：100px；
高度：100px；
边界半径：50%；
边框：50像素点橙色；
}

---

这听起来像是SVG的工作。它有自己的类型，可以包含任意形状。

HTML

通过垂直拆分

a

，可以将其简单地扩展为4个部分，而不是2个部分。不过，我建议你看看 . 你甚至可以欺骗和使用一个

试试这个纯css：

*{框大小：边框框；填充：0；边距：0}
导航，导航：之前{
边界半径：50%；
背景：绿色
}
导航{
宽度：200px；
高度：200px；
利润率：40px自动；
位置：相对位置；
溢出：隐藏
}
导航：以前{
内容：''；
位置：绝对位置；
最高：50%；
左：50%；
宽度：100px；
高度：100px；
z指数：2；
转换：translate3d（-50%，-50%，0）
}
#包围{
宽度：100px；
高度：100px；
边界半径：50%；
边框：50像素点橙色；
}
导航a{
位置：绝对位置；
z指数：1；
光标：指针；
宽度：0px；
高度：0px；
边框顶部：30px实心透明；
边框底部：30px实心透明
}
导航a:第n个孩子（3），导航a:第n个孩子（4）{
左：70像素；
左边框：30px实心透明；
右边框：30px实心透明
}
导航a：第一个孩子{
顶部：70像素；
左：0；
左边框：100像素纯色橙色
}
导航a:第n个孩子（2）{
左：20px；
左边框：100px实心橙色；
顶部：20px；
变换：旋转（60度）；
}
导航a:第n个孩子（3）{
变换：旋转（30度）；
顶部：0px；
左：86px；
边框顶部：100px实心橙色；
}
导航a:第n个孩子（4）{
左：46px；
边框底部：100px实心橙色；
底部：-4px；
变换：旋转（28度）；
}
导航a:第n个孩子（5）{
右：24px；
右边框：100px实心橙色；
底部：20px；
变换：旋转（60度）；
}
导航a：最后一个孩子{
顶部：70像素；
右：0；
右边框：100px实心橙色
}

---

您可以使用地图，如下所示：

#圆圈{
位置：相对位置；
宽度：200px；
高度：200px；
边界半径：50%；
背景：绿色；
}
#映射链接{
位置：绝对位置；
顶部：0px；
左：0px；
}
#包围{
宽度：100px；
高度：100px；
边界半径：50%；
边框：50像素点橙色；
边框间距：10px 50px；
}

---

您可以使用

svg

的

arc

s为链接创建节和

svg

的锚定（相当于HTML锚定标记）标记

.frag{
填充：#FFA500；
冲程：#FFFFFF；
过渡：填充0.3s；
}
.中心{
填写：#008000；
}
a:悬停，该死{
填充：#FFC722；
}
正文{
字号：17px；
填充：#FFFFFF；
}

---

我试图使用纯css， 我想到了这个：

.wrap{
高度：200px；
宽度：200px；
背景：红色；
边界半径：50%；
位置：相对位置；
溢出：隐藏；
}
.包装：之后{
位置：绝对位置；
身高：50%；
宽度：50%；
内容：“；
边界半径：50%；
背景：绿色；
左：25%；
最高：25%；
}
.切片{
身高：0；
宽度：0；
左边框：200px纯蓝色；
边框顶部：200px实心透明；
位置：绝对位置；
顶部：-100px；
左：-100px；
}
.第二部分{
左边框：200px实心红色；
边框顶部：200px实心透明；
变换：旋转（180度）；
顶部：-100px；
左：-100px；
}
.第三部分{
左边框：200px纯粉色；
边框顶部：200px实心透明；
变换：旋转（90度）；
顶部：-100px；
左：100px；
}

CSS专用方法 注意：使用伪元素可以显著减少标记，我目前还没有使用过伪元素。

您可以使用SVG，但这可以通过CSS和HTML单独实现。

我所做的是创建

12

半圆（通过向父容器添加

overflow:hidden；

）。然后，我创建了6个半圆形的分组

中心的角度应分别为

30度

（

360/12

）。要实现这一点，我们必须从其原始圆的中心旋转半圆。我们可以使用

变换原点：50%100%

现在只需旋转/翻转第二组
6
半圆即可完成设计

最后，添加一个中心绿色圆圈以完成设计


.cont，#包{
高度：200px；
宽度：400px；
溢出：隐藏；
}
#一、二、三、四、五、六{
高度：400px；
宽度：400px；
边界半径：200px；
}
#包>分区{
位置：相对位置；
变换原点：50%100%；
}
#一、三、五{
背景颜色：橙色；
}
#一：悬停，三：悬停，五：悬停{
背景颜色：金色；
}
#二、四、六{
背景色：森林绿；
}
#袋子>：第n个孩子（2）{
顶部：-200px；
-webkit变换：旋转（30度）；
变换：旋转（30度）；
}
#袋子>：第n个孩子（3）{
顶部：-400px；
变换：旋转（60度）；
变换：旋转（60度）；
}
#行李>分区：第n个孩子（4）{
顶部：-600px；
-webkit变换：旋转（90度）；
变换：旋转（90度）；
}
#袋子>：第n个孩子（5）{
顶部：-800px；
-webkit变换：旋转（120度）；
变换：旋转（120度）；
}
#袋子>：第n个孩子（6）{
顶部：-1000px；
-webkit变换：旋转（150度）；
变换：旋转（150度）；
}
#行李：第n种类型（2）{
变换：比例（-1）；
变换原点：50%50%；
}
#绿色中心{
高度：200px；
W
<div id="circle">
    <a id='left' href='left'></a>
    <a id='right' href='right'></a>
    <div id="mid"></div>
</div>

#circle{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}

a {
    height: 100%;
    width: 49%;
    background: orange;
    display: block;
}

#left {
    float: left;
}

#right {
    float: right;
}

#mid {
    border-radius: 50%;
    background: green;
    border: 4px solid white;
    position: absolute;
    display: block;
    height: 50%;
    width: 50%;
    left: 24%;
    top: 24%;
}

<path d='M55,55 L105,55 A50,50 0 0,1 80,98.30z' />