【CSS】使用 CSS 绘制三角形

一、Border 边框法（最常用）

原理：通过设置元素的宽高为 0，利用透明边框相交形成三角形。

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;  /* 左侧边框透明 */
  border-right: 50px solid transparent; /* 右侧边框透明 */
  border-bottom: 100px solid red;       /* 下边框显示颜色 */
}

• 关键属性：width: 0; height: 0; + border-* 组合

• 方向控制：

• 向上：border-bottom 有颜色，其他透明

• 向下：border-top 有颜色，其他透明

• 向左/右：设置对应边框颜色（如左三角形：border-right 有颜色）

• 优点：兼容性极佳（包括 IE8+），代码简单

• 缺点：无法在三角形内部添加内容

等腰直角三角形：

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid lightblue;
  border-bottom: 50px solid lightblue;
  border-top: 50px solid transparent;
}

原理

1. 构建一个正方形
2. 为正方形添加不同方向的边框
3. 将正方形的宽高设置为0
4. 设置三个边框为透明

// 1
.triangle {
  width: 50px;
  height: 50px;
  background-color: red;
}

// 2
.trangle {
  // ....
  border-left: 50px solid yellow;
  border-right: 50px solid green;
  border-bottom: 50px solid lightblue;
  border-top: 50px solid pink;
}

// 3
.trangle {
  // ....
  width: 0;
  height: 0;
}

// 4
.trangle {
  // ....
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-top: 50px solid pink;
}

二、Clip-Path 裁剪法

原理：通过裁剪元素的可见区域形成三角形。

.triangle {
  width: 100px;
  height: 100px;
  background: red;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* 定义三个顶点坐标 */
}

• 关键属性：clip-path: polygon(x1 y1, x2 y2, x3 y3)

• 方向控制：调整坐标点顺序（如 polygon(0% 0%, 100% 50%, 0% 100%) 为右三角形）

• 优点：支持任意形状，容器可添加内容，响应式自适应

• 缺点：低版本浏览器兼容性差（如 IE 不支持）

三、渐变法（Linear/Conic Gradient）

原理：利用线性或角向渐变的颜色断点生成三角形。

.triangle {
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, red 50%, transparent 50%);
}

• 关键属性：linear-gradient() 或 conic-gradient()

• 方向控制：调整渐变角度（如 to bottom right）或颜色断点位置

• 优点：支持复杂渐变效果，容器保留原有尺寸

• 缺点：实现复杂度高，需调试角度和断点

四、字符法（特殊场景）

原理：使用 Unicode 字符直接显示三角形符号。

<div class="triangle">▼</div>

.triangle {
  font-size: 50px;
  color: red;
}

• 关键属性：font-family + Unicode 字符（如 ▲ ▼ ◀ ▶）

• 优点：无需 CSS 绘制

• 缺点：依赖字体库，样式控制有限

方案对比与选型建议

推荐优先级：

1. Border 边框法（兼容性强，代码简洁）
2. Clip-Path 法（现代项目首选，灵活易维护）
3. 渐变法（特殊视觉效果需求）

注意事项
• 等边三角形：需计算边框宽度比例（如底边 100px，左右边框 ≈87px）

• 性能优化：避免频繁使用 clip-path 或渐变，可能导致渲染性能下降

• 浏览器前缀：部分属性需加 -webkit- 前缀（如 clip-path）