如何让环形布局的每个区块尺寸一致且支持点击？

核心思路 #

避开矩形元素旋转导致的拉伸变形问题，改用CSS clip-path 裁剪标准环形扇形配合旋转，让每个区块都是规格统一的扇形结构，同时保留独立DOM元素以支持点击功能。

具体实现步骤 #

1. 容器配置：创建基础容器，通过CSS变量统一管理每个区块的角度、内圈半径等参数，方便后续调整环形的大小和宽度。
2. 区块样式：每个区块绝对定位铺满容器，通过transform-origin和rotate属性旋转到对应位置，再用clip-path裁剪出标准的环形扇形，确保所有区块形状、尺寸完全一致。
3. 点击功能：直接给每个区块绑定点击事件，无需额外的复杂处理。

代码示例（Svelte） #

<script>
  // 模拟8个区块数据，可按需调整数量
  const items = Array.from({ length: 8 }, (_, i) => ({ 
    id: i + 1, 
    color: `hsl(${i * 45}, 70%, 60%)` 
  }));
  const angle = 360 / items.length; // 单个区块对应的角度
  const innerRadius = '40%'; // 内圈半径，控制环形的宽度
</script>

<div class="ring-container" style={`--angle: ${angle}deg; --inner-radius: ${innerRadius}`}>
  {#each items as item, index}
    <div 
      class="block" 
      style={`--index: ${index}; background-color: ${item.color}`}
      on:click={() => alert(`点击了区块 ${item.id}`)}
    />
  {/each}
</div>

<style>
  .ring-container {
    width: 300px;
    height: 300px;
    position: relative;
  }

  .block {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform-origin: center center;
    /* 旋转到对应位置 */
    transform: rotate(calc(var(--index) * var(--angle)));
    /* 裁剪出环形扇形 */
    clip-path: polygon(
      50% 50%,
      100% 0%,
      100% 100%,
      50% 50%,
      calc(50% - var(--inner-radius)) 0%,
      calc(50% - var(--inner-radius)) 100%
    );
    cursor: pointer;
    transition: transform 0.2s;
  }

  .block:hover {
    /* 可选：添加hover交互效果 */
    transform: rotate(calc(var(--index) * var(--angle))) scale(1.05);
  }
</style>

方案优势 #

• 无需复杂的定位计算，纯CSS实现，代码简洁易维护；
• 所有区块基于相同参数裁剪，尺寸、形状完全统一；
• 每个区块都是独立DOM元素，点击事件直接绑定，无额外交互障碍。

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