如何在边框侧创建带有链接的圆圈

仅限CSS的方法

注意:使用我目前尚未使用的伪元素可以显着减少标记.

您可以使用SVG,但这可以仅使用CSS和HTML.

我所做的是创建12半圆(通过添加overflow: hidden;到父容器).然后我创建了单独的6半圆组.

中心的角度应为30deg每个(360/12).为实现这一目标,我们必须从原来的圆心旋转半圆.我们可以这样做transform-origin: 50% 100%;

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

最后,添加一个中心绿色圆圈来完成设计.

.cont, #bag {
    height:200px;
    width:400px;
    overflow:hidden;
}
#one, #two, #three, #four, #five, #six {
    height:400px;
    width:400px;
    border-radius:200px;
}
#bag > div {
    position:relative;
    transform-origin:50% 100%;
}
#one, #three, #five {
    background-color:orange;
}
#one:hover, #three:hover, #five:hover {
    background-color:gold;
}
#two, #four, #six {
    background-color:forestgreen;
}
#bag > :nth-child(2) {
    top:-200px;
    -webkit-transform:rotate(30deg);
    transform:rotate(30deg);
}
#bag > :nth-child(3) {
    top:-400px;
    transform:rotate(60deg);
    transform:rotate(60deg);
}
#bag > div:nth-child(4) {
    top:-600px;
    -webkit-transform:rotate(90deg);
    transform:rotate(90deg);
}
#bag > :nth-child(5) {
    top:-800px;
    -webkit-transform:rotate(120deg);
    transform:rotate(120deg);
}
#bag > :nth-child(6) {
    top:-1000px;
    -webkit-transform:rotate(150deg);
    transform:rotate(150deg);
}
#bag:nth-of-type(2){
    transform:scale(-1);
    transform-origin:50% 50%;
}
#green-center {
    height:200px;
    width:200px;
    border-radius:50%;
    background-color:forestgreen;
    position: relative;
    top:-300px;
    left:100px;
}

    

        

    
    

        
ABC