【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 绘制

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

---

方案对比与选型建议

方法	兼容性	灵活性	内容支持	适用场景
Border 边框法	⭐⭐⭐⭐	⭐⭐	❌	简单箭头、工具提示
Clip-Path	⭐⭐	⭐⭐⭐	✅	复杂形状、响应式设计
渐变法	⭐⭐⭐	⭐⭐	✅	渐变效果、背景装饰
字符法	⭐⭐⭐⭐	❌	✅	快速实现、无需精确控制

推荐优先级：

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

---

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

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

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