如何用 CSS 画一个三角形？原理和实战指南
一、核心原理
CSS 画三角形的本质是利用边框（border）的叠加特性。当一个元素的宽高为 0 时，其边框会以对角线形式相交，形成四个独立的三角形区域。通过控制某一边的边框颜色为可见，其他边为透明，即可渲染出特定方向的三角形。
几何逻辑：
每个边框（上、右、下、左）在宽高为 0 的元素中，会以 45 度角向中心收缩。例如：
- 若只显示上边框，则上下边框会交叠为矩形；但若隐藏其他三边，则上边框会呈现为倒三角形。
二、基础实现代码
.triangle {
width: 0;
height: 0;
border: 50px solid transparent; /* 透明边框占位 */
border-top-color: red; /* 只显示上边框颜色 */
}效果：生成一个向下的红色三角形（因为上边框向下挤压）。
三、不同方向的三角形
通过调整 border-{方向}-color 控制三角形指向：
/* 向上 */
.triangle-up {
border-bottom-color: red;
}
/* 向右 */
.triangle-right {
border-left-color: red;
}
/* 向左 */
.triangle-left {
border-right-color: red;
}
/* 向下 */
.triangle-down {
border-top-color: red;
}四、进阶技巧
1. 非等腰三角形
通过不等宽边框实现锐角/钝角三角形：
.skew-triangle {
width: 0;
height: 0;
border-left: 80px solid transparent; /* 左宽右窄 */
border-right: 20px solid transparent;
border-bottom: 50px solid blue;
}效果：生成一个向右倾斜的锐角三角形。
2. 直角三角形
结合单边边框和隐藏其他边：
.right-angle {
width: 0;
height: 0;
border-top: 50px solid red;
border-right: 50px solid transparent;
}效果：直角位于右下角。
3. 通过伪元素生成
避免污染 DOM 结构：
.button::after {
content: '';
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border: 6px solid transparent;
border-top-color: #333; /* 下拉箭头 */
}五、现代方案：clip-path
使用 clip-path 直接裁剪元素形状（更直观但兼容性稍弱）：
.clip-triangle {
width: 100px;
height: 100px;
background: red;
clip-path: polygon(50% 0, 100% 100%, 0 100%); /* 三点定义三角形 */
}优势：可定义任意角度和复杂形状。
六、使用场景与建议
-
轻量化图标
适合下拉箭头、Tooltip 指示符等简单图形，减少图片请求。.tooltip::before { content: ''; position: absolute; bottom: -10px; left: 50%; border: 5px solid transparent; border-top-color: #333; } -
对话框气泡
结合定位实现气泡尾部：.bubble { position: relative; background: #f0f0f0; padding: 15px; } .bubble::after { content: ''; position: absolute; left: -10px; top: 20px; border: 10px solid transparent; border-right-color: #f0f0f0; } -
动态交互
通过 CSS 变量控制三角形大小：.dynamic-triangle { width: 0; height: 0; border: var(--size, 20px) solid transparent; border-top-color: var(--color, red); }
七、注意事项
-
抗锯齿问题
细边框（如 1px）可能导致边缘模糊，可通过transform: rotate(0.1deg)强制触发 GPU 渲染优化。 -
盒模型干扰
若父元素有overflow: hidden，需确保三角形位置在可视区域内。 -
兼容性兜底
使用clip-path时，为旧浏览器提供降级样式：.clip-triangle { background: red; /* 旧浏览器显示矩形 */ clip-path: polygon(...); /* 新浏览器显示三角形 */ } -
性能优化
频繁动画中避免使用clip-path（部分浏览器渲染性能较差），优先使用边框方案。
八、总结
CSS 三角形是“CSS Hack”的经典应用，核心在于理解边框叠加的几何特性。在实际开发中：
- 简单场景用边框：兼容性好，代码简洁。
- 复杂图形用 clip-path：灵活但需注意兼容。
- 优先使用伪元素：保持 HTML 结构干净。
通过合理选择方案，可以在不增加资源开销的前提下，实现高效的 UI 细节优化。
