【CSS】使用 CSS 绘制三角形

news2025/5/19 5:45:49

一、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;
}

在这里插入图片描述

原理

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

// 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	⭐⭐	⭐⭐⭐	✅	复杂形状、响应式设计
渐变法	⭐⭐⭐	⭐⭐	✅	渐变效果、背景装饰
字符法	⭐⭐⭐⭐	❌	✅	快速实现、无需精确控制