如何制作带对应文字的圆形环绕线条（文字不使用伪类）

嘿，我来帮你搞定这个需求！你已经有了环绕线条的初步实现，现在咱们把对应文字加上，全程不用伪类，全靠真实元素来实现。

核心思路 #

• 把中心圆作为定位容器，所有线条和文字都基于它的中心来旋转定位
• 用transform-origin设置旋转原点为中心圆的中心，这样线条和文字能精准绕圈排列
• 每个文字元素独立存在，通过两次旋转保证文字方向正确：先跟着线条一起旋转到对应角度，再反向旋转让文字保持水平正立

完整实现代码 #

<div class="outCircle">
  <!-- 中心圆点 -->
  <div class="center-dot"></div>
  
  <!-- 环绕线条+文字组 -->
  <div class="circle-item">
    <div class="marker"></div>
    <span class="text">顶部</span>
  </div>
  <div class="circle-item angle-45">
    <div class="marker"></div>
    <span class="text">右上</span>
  </div>
  <div class="circle-item angle-90">
    <div class="marker"></div>
    <span class="text">右侧</span>
  </div>
  <div class="circle-item angle-135">
    <div class="marker"></div>
    <span class="text">右下</span>
  </div>
  <div class="circle-item angle-180">
    <div class="marker"></div>
    <span class="text">底部</span>
  </div>
  <div class="circle-item angle-225">
    <div class="marker"></div>
    <span class="text">左下</span>
  </div>
  <div class="circle-item angle-270">
    <div class="marker"></div>
    <span class="text">左侧</span>
  </div>
  <div class="circle-item angle-315">
    <div class="marker"></div>
    <span class="text">左上</span>
  </div>
</div>

.outCircle {
  width: 20px;
  height: 20px;
  background-color: lightblue;
  position: relative;
  border-radius: 50%;
  margin: 100px auto;
}

/* 中心圆点样式（和原样式保持一致） */
.center-dot {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: lightblue;
}

/* 每个环绕项的容器，负责旋转定位 */
.circle-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px; /* 控制环绕半径，数值越大圈越大 */
  height: 2px;
  transform-origin: left center; /* 旋转原点设为中心圆的中心 */
}

/* 统一线条样式，减少重复代码 */
.marker {
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, black, black 25%, transparent 25%, transparent 75%, black 75%);
}

/* 文字样式，定位在线条外侧 */
.text {
  position: absolute;
  right: -20px; /* 调整文字和线条的距离 */
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
}

/* 不同角度的旋转类 */
.angle-45 {
  transform: rotate(45deg);
}
.angle-45 .text {
  transform: translateY(-50%) rotate(-45deg); /* 反向旋转，让文字正过来 */
}

.angle-90 {
  transform: rotate(90deg);
}
.angle-90 .text {
  transform: translateY(-50%) rotate(-90deg);
}

.angle-135 {
  transform: rotate(135deg);
}
.angle-135 .text {
  transform: translateY(-50%) rotate(-135deg);
}

.angle-180 {
  transform: rotate(180deg);
}
.angle-180 .text {
  transform: translateY(-50%) rotate(-180deg);
}

.angle-225 {
  transform: rotate(225deg);
}
.angle-225 .text {
  transform: translateY(-50%) rotate(-225deg);
}

.angle-270 {
  transform: rotate(270deg);
}
.angle-270 .text {
  transform: translateY(-50%) rotate(-270deg);
}

.angle-315 {
  transform: rotate(315deg);
}
.angle-315 .text {
  transform: translateY(-50%) rotate(-315deg);
}

关键细节说明 #

1. 旋转原点设置：.circle-item的transform-origin: left center是核心，因为我们把每个item的左边对齐中心圆的中心，这样旋转时就会绕着中心转。
2. 文字方向修正：每个角度的文字都要反向旋转相同角度，这样即使线条转了45/90度，文字还是水平正立的。
3. 灵活调整：修改.circle-item的width可以调整环绕半径，修改.text的right值可以调整文字和线条的距离，完全按需调整。

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