面试题：如何用 CSS 实现一个扇形？

这是一个非常有挑战性的 CSS 面试题，考察对 CSS 形状、变换和布局的深入理解。实现一个扇形通常需要结合 border-radius、clip-path 或 transform 等技术。

---

核心思路

扇形是圆的一部分，由一个圆心角和两条半径构成。CSS 本身没有直接的“扇形”形状，但可以通过以下方式模拟：

---

方法一：使用 clip-path (推荐，现代方案)

clip-path 是最直接、最灵活的方法，可以定义任意的裁剪区域。

实现步骤

1. 创建一个圆形（通过 border-radius: 50%）。
2. 使用 clip-path 的 polygon() 函数定义一个三角形区域，从圆心延伸到圆周。

代码示例

.fan-shape {
    width: 200px;
    height: 200px;
    background: #3498db;
    border-radius: 50%; /* 变成圆形 */
    clip-path: polygon(
        50% 50%,     /* 圆心 */
        50% 0%,      /* 顶部中点 */
        100% 50%     /* 右侧中点 */
    );
    /* 这将创建一个 90° 的扇形（从上到右） */
}

动态角度（使用 CSS 变量）

.fan-shape {
    --angle: 60deg; /* 扇形角度 */
    width: 200px;
    height: 200px;
    background: #e74c3c;
    border-radius: 50%;
    clip-path: path('M50,50 L50,0 A50,50 0 0,1 75,13.4 Z');
    /* 或者用 JS 动态生成 path 数据 */
}

注意：path() 函数更精确但复杂，polygon() 更简单但只能创建多边形近似。

优点

• 语法相对直观。
• 支持复杂形状。
• 现代浏览器支持良好。

缺点

• 在旧版浏览器（如 IE）中不支持。

---

方法二：使用 border 技巧 + transform (经典 hack)

利用 CSS border 的特性（当元素尺寸趋近于 0 时，border 会形成三角形）。

实现步骤

1. 创建一个宽高为 0 的元素。
2. 设置巨大的 border-width。
3. 只给两个相邻的边设置颜色，其余为透明。
4. 用 border-radius 将直角变成圆角（近似扇形）。

代码示例

.fan-hack {
    width: 0;
    height: 0;
    border: 100px solid transparent;
    border-top-color: #9b59b6;    /* 上边有颜色 */
    border-right-color: #9b59b6;  /* 右边有颜色 */
    border-radius: 100px;         /* 使角变圆 */
    /* 注意：这不是完美的扇形，而是“圆角三角形” */
}

优化：更接近扇形

/* 用一个圆形遮罩 */
.fan-container {
    width: 200px;
    height: 200px;
    position: relative;
    overflow: hidden;
}

.fan-triangle {
    position: absolute;
    width: 0;
    height: 0;
    border: 100px solid transparent;
    border-top-color: #f39c12;
    border-right-color: #f39c12;
}

/* 用圆形裁剪 */
.fan-container::after {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    background: white;
    border-radius: 50%;
    top: 0;
    left: 0;
    mix-blend-mode: multiply; /* 或用 clip-path */
}

优点

• 兼容性好（支持老浏览器）。

缺点

• 代码复杂，难以精确控制角度。
• 不是真正的扇形，视觉上有偏差。

---

方法三：使用 SVG (最精确)

虽然题目要求用 CSS，但 SVG 是实现几何形状的终极方案，且可以嵌入 HTML。

<svg width="200" height="200" viewBox="0 0 100 100">
    <path d="M50,50 L50,0 A50,50 0 0,1 85.36,14.64 Z" 
          fill="#2ecc71" />
</svg>

• M50,50: 移动到圆心。
• L50,0: 画线到顶部。
• A50,50 0 0,1 85.36,14.64: 画圆弧到 60° 位置。
• Z: 闭合路径。

优点

• 精确、可缩放、语义清晰。

缺点

• 不是纯 CSS。

---

方法四：使用 conic-gradient (背景模拟)

如果扇形只是作为背景，可以用 conic-gradient。

.fan-gradient {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg at 50% 50%,
        #e67e22 0deg 90deg,     /* 90° 橙色扇形 */
        transparent 90deg 360deg
    );
}

优点

• 简单，适合背景效果。

缺点

• 无法作为实际的“形状”参与布局。
• 只能用于视觉呈现。

---

总结与面试回答

实现 CSS 扇形有多种方法：

1. clip-path：最推荐的现代方案，使用 polygon() 或 path() 直接裁剪出扇形区域。
2. border hack：经典技巧，利用 border 形成三角形再加 border-radius 近似，兼容性好但不精确。
3. conic-gradient：适合作为背景，代码简洁。
4. SVG：最精确的方案，适合复杂或需要交互的场景。

在现代开发中，我会优先使用 clip-path 或 conic-gradient。如果需要极致兼容性，会考虑 border hack。对于复杂图形，直接使用 SVG 更高效。

关键点：理解每种方法的原理、优缺点和适用场景，根据项目需求选择最佳方案。