如何使用CSS画一个三角形，原理是什么？

如何用 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 细节优化。