如何在CSS多边框扇区间添加间隙并解决旋转收缩问题？

我需要用CSS创建4个环形扇区，HTML结构如下：

<div className={classes.loader}>
    <section className={classes.loader_sector}></section>
    <section className={classes.loader_sector}></section>
    <section className={classes.loader_sector}></section>
    <section className={classes.loader_sector}></section>
</div>

当前使用的CSS代码如下：

.loader_sector {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 0.8rem solid transparent;
}

.loader_sector:nth-child(1) {
  border-top-color: #fff;
}
.loader_sector:nth-child(2) {
  border-left-color: #fff;
}
.loader_sector:nth-child(3) {
  border-right-color: #fff;
}
.loader_sector:nth-child(4) {
  border-bottom-color: #fff;
}

现在的问题是所有扇区边框紧密相连，我希望在扇区连接处添加间隙。另外之前尝试用margin-top、margin-left等属性调整间隙，但旋转扇区时会出现扇区收缩的问题。

解决方案 #

通过clip-path裁剪出带间隙的扇区范围，结合transform-origin确保旋转中心为元素中心，同时设置box-sizing: border-box避免边框影响元素尺寸，解决旋转收缩问题。修改后的CSS代码如下：

/* 容器设置：相对定位、固定宽高、圆形 */
.loader {
  position: relative;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
}

.loader_sector {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 0.8rem solid transparent;
  box-sizing: border-box; /* 边框计入宽高，避免尺寸溢出 */
  transform-origin: center; /* 旋转中心为元素中心 */
}

/* 上扇区：裁剪出带间隙的顶部区域，轻微旋转调整位置 */
.loader_sector:nth-child(1) {
  border-top-color: #fff;
  transform: rotate(5deg);
  clip-path: polygon(50% 0%, 50% 50%, 97.5% 50%, 97.5% 0%, 2.5% 0%, 2.5% 50%);
}

/* 左扇区：裁剪出带间隙的左侧区域，旋转95度对齐位置 */
.loader_sector:nth-child(2) {
  border-left-color: #fff;
  transform: rotate(95deg);
  clip-path: polygon(0% 50%, 50% 50%, 50% 97.5%, 0% 97.5%, 0% 2.5%, 50% 2.5%);
}

/* 右扇区：裁剪出带间隙的右侧区域，旋转-85度对齐位置 */
.loader_sector:nth-child(3) {
  border-right-color: #fff;
  transform: rotate(-85deg);
  clip-path: polygon(100% 50%, 50% 50%, 50% 97.5%, 100% 97.5%, 100% 2.5%, 50% 2.5%);
}

/* 下扇区：裁剪出带间隙的底部区域，旋转185度对齐位置 */
.loader_sector:nth-child(4) {
  border-bottom-color: #fff;
  transform: rotate(185deg);
  clip-path: polygon(50% 100%, 50% 50%, 97.5% 50%, 97.5% 100%, 2.5% 100%, 2.5% 50%);
}

原理说明 #

1. box-sizing: border-box：确保边框宽度计入元素的宽高，避免元素因边框超出容器范围，旋转时不会出现视觉收缩。
2. clip-path：通过多边形裁剪，让每个扇区只显示85度范围的边框，相邻扇区之间留出5度的间隙。
3. transform-origin: center：保证扇区始终以中心为原点旋转，旋转过程中位置和尺寸保持稳定。

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