CSS实现七条彩色线段圆形布局：线段精准贴合圆形边框

嘿，这就帮你实现七条线段完美贴合预设圆边框的圆形布局！我整理了完整的代码和思路，你直接用就行~

核心思路 #

我们可以利用CSS的transform属性（旋转+平移）来精准定位每条线段：

• 七条线段平均分布在圆上，每条的间隔角度是360°/7 ≈ 51.428°
• 以父容器中心为原点，先旋转线段的定位角度，再平移到预设圆的半径位置，最后反向旋转线段本身保证文字正向显示
• 预设一个虚线圆作为背景参考，方便对齐调整

完整代码实现 #

HTML结构

<div class="circle-container">
  <!-- 预设演示圆（可隐藏） -->
  <div class="demo-circle"></div>
  <!-- 七条带编号的彩色线段 -->
  <div class="div7">7</div>
  <div class="div6">6</div>
  <div class="div5">5</div>
  <div class="div4">4</div>
  <div class="div3">3</div>
  <div class="div2">2</div>
  <div class="div1">1</div>
</div>

CSS样式

/* 父容器：作为所有元素的定位基准 */
.circle-container {
  position: relative;
  width: 300px; /* 对应预设圆的直径 */
  height: 300px;
  margin: 50px auto;
}

/* 预设演示圆：虚线边框作为参考，可根据需求调整大小 */
.demo-circle {
  width: 100%;
  height: 100%;
  border: 1px dashed #ccc;
  border-radius: 50%;
  position: absolute;
  z-index: 0; /* 放在线段下方 */
}

/* 通用线段样式：统一设置尺寸、文字对齐和定位方式 */
.circle-container > div[class^="div"] {
  width: 100px;
  height: 10px;
  color: white;
  font-weight: bold;
  text-align: center;
  line-height: 10px; /* 垂直居中文字 */
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px; /* 让线段以中心为基准点 */
  z-index: 1; /* 放在演示圆上方 */
}

/* 每条线段的颜色和定位参数 */
.div7 { background: red; transform: rotate(0deg) translate(150px) rotate(0deg); }
.div6 { background: orange; transform: rotate(51.428deg) translate(150px) rotate(-51.428deg); }
.div5 { background: yellow; transform: rotate(102.856deg) translate(150px) rotate(-102.856deg); }
.div4 { background: green; transform: rotate(154.284deg) translate(150px) rotate(-154.284deg); }
.div3 { background: blue; transform: rotate(205.712deg) translate(150px) rotate(-205.712deg); }
.div2 { background: indigo; transform: rotate(257.14deg) translate(150px) rotate(-257.14deg); }
.div1 { background: violet; transform: rotate(308.568deg) translate(150px) rotate(-308.568deg); }

关键细节说明 #

• 尺寸调整：如果要修改预设圆的大小，只需调整.circle-container的宽高，同时把translate的数值改为宽高的一半（即半径）
• 隐藏演示圆：如果不需要背景参考，给.demo-circle添加display: none即可
• 线段长度：如果修改线段宽度（width），记得同步调整margin-left为宽度的一半，保证旋转基准点正确

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