如何实现三等分且每部分为可交互按钮的圆形组件

完全可以实现，下面提供两种可靠的实现方式：

方法一：使用CSS clip-path 裁剪扇形 #

通过clip-path的多边形裁剪功能，把三个按钮分别裁剪成120°的扇形，再通过绝对定位让它们重叠在同一个圆形区域内。

<div class="circle-container">
  <button class="sector sector-1">按钮1</button>
  <button class="sector sector-2">按钮2</button>
  <button class="sector sector-3">按钮3</button>
</div>

.circle-container {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  overflow: hidden; /* 确保裁剪后的内容不溢出容器 */
}

.sector {
  position: absolute;
  width: 100%;
  height: 100%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
}

/* 第一个扇形：0°-120° */
.sector-1 {
  background: #ff6b6b;
  clip-path: polygon(50% 50%, 100% 0%, 100% 100%);
}

/* 第二个扇形：120°-240° */
.sector-2 {
  background: #4ecdc4;
  clip-path: polygon(50% 50%, 0% 0%, 100% 0%);
}

/* 第三个扇形：240°-360° */
.sector-3 {
  background: #45b7d1;
  clip-path: polygon(50% 50%, 0% 100%, 0% 0%);
}

/* hover效果示例 */
.sector:hover {
  opacity: 0.9;
}

方法二：使用SVG绘制扇形按钮 #

SVG对图形的控制更精准，适合绘制规则的扇形，且每个扇形可以直接作为可交互元素。

<svg width="300" height="300" viewBox="0 0 300 300">
  <!-- 第一个扇形：0°-120° -->
  <path d="M150,150 L300,0 A150,150 0 0,1 300,300 Z" fill="#ff6b6b" style="cursor:pointer;" onclick="alert('按钮1被点击')"/>
  <!-- 第二个扇形：120°-240° -->
  <path d="M150,150 L300,300 A150,150 0 0,1 0,300 Z" fill="#4ecdc4" style="cursor:pointer;" onclick="alert('按钮2被点击')"/>
  <!-- 第三个扇形：240°-360° -->
  <path d="M150,150 L0,300 A150,150 0 0,1 0,0 Z" fill="#45b7d1" style="cursor:pointer;" onclick="alert('按钮3被点击')"/>
  <!-- 可选：添加中心圆点 -->
  <circle cx="150" cy="150" r="30" fill="#fff" style="cursor:pointer;" onclick="alert('中心按钮')"/>
</svg>

两种方法都能实现你要的三等分圆形按钮效果，SVG方案在跨浏览器兼容性和图形精准度上表现更优，CSS clip-path则更适合纯HTML/CSS的场景。

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