如何仅用CSS制作甜甜圈扇形？附尝试代码求指导

你的思路方向是对的，但用border来构建确实很难精准控制扇形角度和实现环形（甜甜圈）效果，这里给你两种更可靠的实现方案：

方法一：利用Clip-path + 伪元素挖空 #

这种方法逻辑直观，适合需要兼容旧浏览器的场景：

/* 甜甜圈扇形样式 */
.donut-sector {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: red;
  /* 裁剪出扇形区域：参数依次是圆心、扇形起始点、扇形结束点 */
  /* 示例是从右侧(100% 50%)到下方(50% 100%)，即90度扇形 */
  clip-path: polygon(50% 50%, 100% 50%, 50% 100%);
  position: relative;
}

/* 伪元素实现内圈挖空，形成甜甜圈效果 */
.donut-sector::after {
  content: '';
  position: absolute;
  /* 调整top/left和width/height控制内圈大小，即甜甜圈的宽度 */
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background-color: #fff; /* 这里用页面背景色填充，实现挖空效果 */
}

<div class="donut-sector"></div>

调整说明： #

• 修改clip-path的后两个坐标可以改变扇形角度：比如要做120度扇形，可以写成polygon(50% 50%, 100% 0%, 30% 100%)，你可以通过计算坐标或者可视化工具生成clip-path代码
• 调整伪元素的top/left和width/height可以控制甜甜圈的宽度：比如top:20%、width:60%会让甜甜圈更宽

方法二：利用Conic-gradient + Mask（更简洁灵活） #

这种方法用CSS渐变直接绘制，代码更简洁，适合现代浏览器：

.donut-sector {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  /* 用锥形渐变绘制扇形：red部分是0-120度，透明部分是120-360度 */
  background: conic-gradient(red 0deg 120deg, transparent 120deg 360deg);
  /* 用径向渐变遮罩挖空中间：透明部分是内圆，黑色部分保留 */
  mask: radial-gradient(transparent 60%, black 60%);
  /* 兼容webkit内核浏览器 */
  -webkit-mask: radial-gradient(transparent 60%, black 60%);
}

<div class="donut-sector"></div>

调整说明： #

• 修改conic-gradient的角度值（0deg 120deg）可以直接控制扇形角度
• 调整radial-gradient中的60%可以控制内圆大小：数值越大，甜甜圈越宽；数值越小，甜甜圈越窄

为什么你的原代码效果不好？ #

你用border构建的方式，本质是利用border的边框形状来模拟扇形，但这种方式：

• 无法精确控制扇形的角度，只能通过调整border的宽度近似模拟
• 很难实现环形挖空效果，需要额外叠加元素，代码复杂度高
• 形状的边缘容易出现不自然的圆角或变形

内容的提问来源于stack exchange，提问作者Alvaro jose hernandez