如何用CSS将所有外围圆形连接到中间红色圆形？

实现思路 #

借助外围每个圆形元素的:before伪元素绘制连接线，利用元素已有的旋转角度自动定位线条，无需额外计算角度，适合新手快速上手。

具体实现步骤 #

1. 给所有外围的.item*元素添加伪元素样式，定义线条基础属性：

   • 绝对定位，以元素自身中心为基准点（top: 50%; left: 50%）
   • 线条宽度设为中心到外围圆心的距离（即代码中translate的12em），高度设为线条粗细（比如1px）
   • 设置transform-origin: 0 50%，让线条旋转原点落在左侧端点（也就是中心圆形的圆心位置）
   • 自定义线条颜色（比如黑色）

2. 由于每个.item*已设置对应旋转角度，伪元素会自动继承该角度，精准指向中心圆形。

完整代码 #

CSS 代码

.circle-container {
    position: relative;
    width: 24em;
    height: 24em;
    padding: 2.8em;
    margin: 1.75em auto 0;
}
.circle-container span {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4em;
    height: 4em;
    margin: -2em;
    border: dashed 1px;
    border-radius: 50%;
    text-align: center;
    line-height: 4em; /* 让文字垂直居中 */
}

.center { background: red; }
.item1 { transform: rotate(-90deg) translate(12em) rotate(90deg); }
.item2 { transform: rotate(-60deg) translate(12em) rotate(60deg); }
.item3 { transform: rotate(-30deg) translate(12em) rotate(30deg); }
.item4 { transform: rotate(0deg) translate(12em) rotate(0deg); }
.item5 { transform: rotate(30deg) translate(12em) rotate(-30deg); }
.item6 { transform: rotate(60deg) translate(12em) rotate(-60deg); }
.item7 { transform: rotate(90deg) translate(12em) rotate(-90deg); }

/* 新增连接线样式 */
.circle-container span[class^="item"]:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12em;
    height: 1px;
    background-color: #000; /* 可自定义线条颜色 */
    transform-origin: 0 50%;
}

HTML 代码

<div class="circle-container">
    <span class="center">MENU</span>

    <span class="item1">ITEM 1</span>
    <span class="item2">ITEM 2</span>
    <span class="item3">ITEM 3</span>
    <span class="item4">ITEM 4</span>
    <span class="item5">ITEM 5</span>
    <span class="item6">ITEM 6</span>
    <span class="item7">ITEM 7</span>
</div>

额外说明 #

• 修改background-color可调整线条颜色，修改height可调整线条粗细
• 线条长度12em与外围元素的translate(12em)保持一致，确保刚好连接两个圆心

内容的提问来源于stack exchange，提问作者popomomo