CSS 纯样式三角形完全指南：8 方向与渐变三角实战

浏览器如何渲染 border？当设置 border 时，浏览器在元素的四条边上各绘制一个梯形（实际是按角度相交的矩形）。关键观察：当元素宽高都为 0 时，四个 border 之间的连接点形成一个菱形，每个边的 border 就是一个等腰直角三角形。例如 width: 0; height: 0; border: 20px solid; 会形成一个 40×40 的菱形，四个三角形分别指向上下左右。将其中三个边设为 transparent，保留一个色值，就得到单色三角形。数学推导：若 border-width 为 W，则三角形的底边长 2W，高也是 W（因为 45 度角的等腰直角三角形）。宽高比例 2W:W = 2:1。改变 border-width 就能改变三角形大小；改变颜色就能改变三角形色值。这就是 CSS 三角形的全部原理。

基础写法（向下的三角形）： .triangle-down { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 30px solid #333; } 为什么可行？左右边框宽 20px 但透明，上边框宽 30px 且不透明（颜色#333）。下边框默认为 transparent。结果是一个向下的三角形。其他七个方向的实现：向上 → border-bottom 有色、border-top transparent；向左 → border-right 有色、border-left transparent；向右 → border-left 有色、border-right transparent；向右上 → border-left 与 border-bottom 有色、border-right 与 border-top transparent；向右下 → border-left 与 border-top 有色、border-right 与 border-bottom transparent；向左下 → border-right 与 border-top 有色、border-left 与 border-bottom transparent；向左上 → border-right 与 border-bottom 有色、border-left 与 border-top transparent。记忆窍门：有色的 border 指向三角形的方向，其他 border 都是 transparent。

三角形的尖锐度由 border 宽度的比例决定。若 border-left 与 border-right 宽度相等（都 20px），border-top 宽度大（30px），则三角形顶角尖锐；若 border-top 与 border-bottom 都很大（各 50px），而 border-left 与 border-right 很小（各 5px），则三角形变成平顶、尖底。通过调整比例可生成等腰、等边或等直角三角形。颜色方面，四个 border 可以分别设置颜色（只有有色的 border 可见）。如果需要两色渐变三角形（从蓝渐变到红），border 属性无法做到，需用 linear-gradient（见下一章）。动态调整可用 CSS 变量：--triangle-size: 20px; border-left-width: var(--triangle-size); 然后用 JavaScript 或 CSS 媒体查询改变 --triangle-size，三角形会响应式缩放。这相比预先生成多个 PNG 图片版本，灵活性提升数倍。

纯 border 三角形只能是单色，但用 linear-gradient 可创建渐变三角形，模拟光影效果或彩虹渐变。基础写法（以向下渐变为例）： .gradient-triangle { width: 0; height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-top: 50px solid red; background: linear-gradient(to bottom, blue, red); } 实际上，linear-gradient 渲染在 border-top 的背景上，但效果通常不理想（因为三角形是 border，不是真正的填充区域）。更好的方案是用 ::before 伪元素结合 clip-path：.gradient-triangle::before { content: ''; position: absolute; width: 100px; height: 100px; background: linear-gradient(135deg, blue, red); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }。这样可以自由组合任意数量的颜色，实现五彩三角形。clip-path 用 polygon() 定义顶点（50% 0% 是上顶，0% 100% 是左下，100% 100% 是右下），浏览器自动填充中间的梯形区域。

CSS 三角形的优势：(1) 文件极小，仅几十字节，不需要额外 HTTP 请求；(2) 完全响应式，用 CSS 变量和 calc() 可自适应各种屏幕；(3) 动画流畅，border-width 变化可用 CSS transition，比 SVG 路径动画更轻（Web 目标：保持 60fps）；(4) 兼容性好，IE 6+ 都支持（虽然三角原理从 IE 5 时代就存在）；(5) 可与 CSS Grid/Flexbox 无缝整合。SVG 三角形的优势：(1) 灵活性高，可绘制任意形状的多边形，不限于简单三角；(2) 精确度好，支持子像素渲染（SVG 可指定 viewBox 与精确坐标）；(3) 可添加 stroke、fill-rule 等高级属性；(4) 可嵌入图形效果（滤镜、渐变、遮罩）。实战建议：简单单色三角形用 CSS border（快速、轻量）；复杂多边形、需要高精度或特殊效果则用 SVG。对于提示气泡、小箭头等常见 UI 元素，CSS 三角形足以胜任。

提示气泡（Tooltip/Popover）是最常见的 CSS 三角形应用。实现原理：外层是圆角矩形（border-radius），用 ::before 或 ::after 伪元素贴上一个向下的小三角形： .tooltip { position: relative; background: #333; color: white; padding: 10px 15px; border-radius: 5px; margin-top: 10px; } .tooltip::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #333; } 这样就生成了一个带指针的气泡。改变 ::after 的位置可实现上/下/左/右四种气泡方向。面包屑分隔符则用斜向三角形（向右的三角形）作为分隔符：.breadcrumb-item::after { content: ''; display: inline-block; border-left: 8px solid #ccc; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin: 0 8px; }。结合 flex 布局，可快速生成可视化的面包屑导航，无需分隔符图片。这两个案例展示了 CSS 三角形在实际 UI 中的强大实用价值。