纯CSS实现多扇区环形图后如何添加对应的径向交互按钮？

用conic-gradient实现环形图是目前纯CSS原生方案里最优的选择之一，兼容性已经覆盖绝大多数主流浏览器，性能也优于SVG或Canvas实现的轻量环形图，不需要调整现有基础逻辑。

要实现径向按钮效果，只需要在你现有代码基础上新增少量DOM和CSS即可：

修改后的完整代码 #

HTML部分

<div class="swiper-slide">
  <div class="row">
    <div class="col">
      <div class="donut">
        <div class="circle">
          <!-- 新增径向按钮 开始 -->
          <button class="radial-btn family-btn" data-type="family"></button>
          <button class="radial-btn health-btn" data-type="health"></button>
          <button class="radial-btn work-btn" data-type="work"></button>
          <button class="radial-btn others-btn" data-type="others"></button>
          <!-- 新增径向按钮 结束 -->
          <div class="inner-circle">
            <div class="balance row">
              <div class="col">
                <span>$</span>
                <span class="int">0</span>
                <span>00</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col">
      <p><div class="family chip"></div>Família</p>
      <p><div class="health chip"></div>Saúde</p>
      <p><div class="work chip"></div>Trabalho</p>
      <p><div class="others chip"></div>Outros</p>
    </div>
  </div>
</div>

CSS新增样式（保留原有代码，追加以下内容即可）

/* 给环形容器加相对定位，作为按钮定位基准 */
.swiper-slide .col .donut .circle {
  position: relative;
}
/* 径向按钮通用样式 */
.radial-btn {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #fff;
  cursor: pointer;
  transform-origin: 50% 73.5px; /* 73.5px为环形半径，即147px/2 */
  top: -15px; /* 向上偏移半个按钮高度，保证按钮中心对齐环形边缘 */
  left: calc(50% - 15px); /* 水平居中 */
  transition: transform 0.2s ease;
}
.radial-btn:hover {
  transform: scale(1.1);
}
/* 按扇形角度分别旋转按钮，对齐对应扇形中心 */
.family-btn {
  background-color: #f5ba19;
  transform: rotate(22.5deg); /* 0-45度扇形中心角度 */
}
.health-btn {
  background-color: #15f987;
  transform: rotate(77.5deg); /* 45-110度扇形中心角度 */
}
.work-btn {
  background-color: #33127a;
  transform: rotate(155deg); /* 110-200度扇形中心角度 */
}
.others-btn {
  background-color: #ef4d8e;
  transform: rotate(280deg); /* 200-360度扇形中心角度 */
}

效果说明 #

• 按钮会自动定位到对应扇形的外侧中心，和参考效果一致
• 自带hover放大交互，也可以自行扩展点击态、激活态样式
• 按钮的data-type属性可直接绑定点击事件，实现对应分类的交互逻辑
• 完全兼容现有环形图实现，不需要修改原有填充逻辑

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