CSS 画扇形怎么做？

⚡ 速记答案（30 秒）

方法一：圆角 + border，正方形 border-radius:50%，只保留一侧 border 其他透明。方法二：conic-gradient 画饼图，配合 clip-path 或旋转控制扇形。

📖 详细讲解

标准面试回答（推荐记住）

CSS 画扇形有几种方法。第一种是用 border 画：创建一个正方形元素，设置 border-radius: 50% 变成圆形，只给其中一两个边框设置颜色，其他透明，就能得到扇形。第二种是用 conic-gradient 锥形渐变，可以直接画出饼图效果，用 clip-path 或旋转来控制显示的角度。第二种方法更灵活，可以精确控制扇形的角度。

✅ 面试要点

•border + border-radius 方案
•conic-gradient 更灵活
•可以精确控制角度

💻 代码示例

CSS 扇形

<style>
/* 方法一：border */
.sector-border {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-radius: 50px;
  border-top-color: #3b82f6;
}

/* 方法二：conic-gradient */
.sector-gradient {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(
    #3b82f6 0deg 90deg,
    transparent 90deg
  );
}
</style>

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

🎨 效果预览