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

这是一个非常经典的 CSS 面试题，考察对 CSS 盒模型和 border 属性的深入理解。

---

核心原理

实现三角形的关键在于理解 CSS border 的渲染机制：

• 当一个元素的 width 和 height 都为 0 时，它的四个边框（top, right, bottom, left）会从中心点向外延伸。
• 相邻的两个边框会在角落处相交，形成一个斜角。
• 如果我们只给一个边框设置颜色，其余边框设置为 transparent（透明），那么这个有颜色的边框就会呈现为一个三角形。

---

方法一：使用 border (最经典、最常用)

实现步骤

1. 创建一个宽高为 0 的元素。
2. 设置一个方向的 border 有颜色（如 border-bottom）。
3. 将其他三个方向的 border 设置为 transparent。
4. 通过调整 border-width 来控制三角形的大小。

代码示例

.triangle {
    width: 0;
    height: 0;
    border: 50px solid transparent; /* 所有边框初始为透明 */
    border-bottom-color: #3498db;  /* 只有底部边框有颜色 */
    /* 这将创建一个向下的蓝色三角形 */
}

改变方向

• 向上：border-top-color: color;
• 向左：border-left-color: color;
• 向右：border-right-color: color;

等边三角形

要创建等边三角形，需要调整 border-width 的比例。例如，一个底边为 100px 的等边三角形，其高度约为 86.6px（100 * √3 / 2）。

.equilateral-triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 86.6px solid #e74c3c;
}

---

方法二：使用 clip-path (现代推荐)

clip-path 允许你定义一个裁剪区域，只显示元素的一部分。

代码示例

.triangle-clip {
    width: 100px;
    height: 100px;
    background: #9b59b6;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    /* 三个点：顶部中点、左下角、右下角 */
}

优点

• 语法直观，容易理解。
• 可以创建任意多边形。
• 现代浏览器支持良好。

缺点

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

---

方法三：使用 linear-gradient (背景模拟)

利用 CSS 渐变创建一个视觉上的三角形。

代码示例

.triangle-gradient {
    width: 100px;
    height: 100px;
    background: linear-gradient(
        45deg, 
        #f39c12 50%, 
        transparent 50%
    );
    /* 这会创建一个对角线分割的三角形效果 */
}

更精确的三角形

.triangle-exact {
    width: 100px;
    height: 86.6px;
    background: linear-gradient(
        to right, 
        transparent 50%, 
        #2ecc71 50%
    );
    background-size: 100% 173.2px; /* 高度的两倍 */
    background-position: 0 0; /* 或 0 86.6px 来翻转 */
}

优点

• 适合作为背景图案。
• 可以创建渐变色三角形。

缺点

• 不是真正的“形状”，只是视觉效果。
• 代码相对复杂。

---

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

虽然不是纯 CSS，但 SVG 是实现矢量图形的最佳方式。

<svg width="100" height="86.6" viewBox="0 0 100 86.6">
    <polygon points="50,0 0,86.6 100,86.6" fill="#1abc9c" />
</svg>

优点

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

缺点

• 需要 HTML 配合。

---

总结与面试回答

实现 CSS 三角形最经典的方法是利用 border 属性：将元素宽高设为 0，通过设置一个有颜色的边框和三个透明边框来形成三角形。这种方法兼容性好，性能高。

现代开发中，clip-path 是更推荐的方案，语法直观，易于控制。

其他方法如 linear-gradient 适合背景效果，SVG 适合复杂图形。

我通常在需要兼容老浏览器时使用 border 方案，在现代项目中优先使用 clip-path。

关键点：不仅要会写代码，更要理解 border 为何能形成三角形的底层原理。