在不使用图片的前提下，有哪些纯 CSS 方案可以绘制一个扇形？请分别说明各方案的实现原理、适用场景以及各自的优缺点。
考察说明
考查对 CSS 几何图形绘制技巧的掌握程度，以及根据场景选择合适方案的能力。
回答思路
- 【回答框架 1】方案一：使用 border-radius 和 overflow: hidden。将正方形元素的 border-radius 设置为 50% 得到圆，再配合一个裁剪容器（如 overflow: hidden）或使用 clip-path 裁剪出扇形。优点是兼容性好、实现简单；缺点是裁剪路径计算相对繁琐。
- 【回答框架 2】方案二：使用 conic-gradient（锥形渐变）。通过设置渐变的起始角度和结束角度，并配合背景的透明度，可以轻松绘制扇形。例如 background: conic-gradient(red 0deg 90deg, transparent 90deg 360deg)。优点是代码简洁、易于控制角度和颜色；缺点是部分旧浏览器不支持。
- 【回答框架 3】方案三：使用 clip-path: polygon() 裁剪。通过计算扇形顶点坐标，用多边形裁剪出扇形区域。优点是可以精确控制形状；缺点是坐标计算复杂，且不支持圆角。
- 【回答框架 4】方案四：使用 SVG 或 Canvas 绘制，再嵌入到 HTML 中。虽然不是纯 CSS，但可以结合 CSS 进行样式控制。优点是能够绘制任意复杂的扇形；缺点是引入了非 CSS 技术。
- 【回答框架 5】在实际项目中，推荐优先使用 conic-gradient 方案，因为它代码量少、可维护性好。如果需要兼容旧浏览器，则选择 border-radius 配合 overflow: hidden 的方案。
- 【关键点 1】conic-gradient 是绘制扇形最简洁的 CSS 方案。
- 【关键点 2】border-radius 配合 overflow: hidden 兼容性最好。
- 【关键点 3】clip-path 适合精确控制形状但计算复杂。
- 【易错点 1】conic-gradient 在旧版浏览器中不支持，需要关注浏览器兼容性。
- 【易错点 2】border-radius 方案在绘制角度较大的扇形时需要复杂的嵌套元素。