纯 CSS 实现三角形的方式

Category（分类）: CSS Status: 未知

CSS 可以通过多种方式绘制基本形状。本文保留原文的三种方案：border、linear-gradient 和 clip-path，并补充每种方案的原理、限制和使用建议。

三种方案并不是 CSS 绘制三角形的全部方法。实际项目中还可以使用 mask、SVG 或图片等方式。本文示例主要关注不依赖额外图片资源的纯 CSS 实现。

1. border 边框

使用 CSS 绘制三角形的第一种方法是利用 border 属性。

当一个元素的宽度和高度都为 0 时，四条边框会在中心区域相交。每条边框会呈现为一个三角形，因此可以通过设置不同的边框颜色观察这个结构：

.triangle {
  width: 0;
  height: 0;
  border: 100px solid;
  border-color: orangered skyblue gold yellowgreen;
}

可以看到，四个边框分别形成了四个三角形。绘制单个三角形时，只保留一个方向的边框颜色，将其他边框设置为透明即可。

向下的三角形

如果想要一个指向下方的三角形，可以让上边框可见，其他边框透明：

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

向右的三角形

如果想要一个指向右方的三角形，可以让左边框可见，其他边框透明：

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

上面的代码也可以使用边框简写来表达：

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-width: 50px 0 50px 50px;
  border-left-color: skyblue;
}

不同方向和尺寸

通过调整各方向边框的宽度和颜色，可以绘制不同比例和方向的三角形。例如，下面的代码只显示上边框，同时保留右侧的透明边框，可以得到一个不对称的三角形：

.triangle {
  width: 0;
  height: 0;
  border-top: 100px solid skyblue;
  border-right: 100px solid transparent;
}

如果希望结果更明确，建议显式写出所有边框的样式，避免继承或默认值造成误解：

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

等边三角形

通过设置两个相等的透明边框和一个有颜色的底边，可以近似绘制等边三角形：

.triangle {
  width: 0;
  height: 0;
  border-left: 69px solid transparent;
  border-right: 69px solid transparent;
  border-bottom: 120px solid skyblue;
}

理论上，等边三角形的高度应满足：

height = width × √3 / 2

示例中底边约为 138px，理论高度约为 119.5px，因此 120px 是一个近似值。

border 方案的特点

优点：

• 代码量少；
• 兼容性好；
• 不需要额外的背景图片；
• 很适合下拉箭头、提示框箭头和小型装饰图形。

限制：

• 元素本身的内容盒宽高为 0，布局和点击区域需要额外考虑；
• 形状尺寸由边框宽度决定，不如 clip-path 直观；
• 对复杂形状和响应式比例不够灵活；
• 作为交互图标时，需要额外提供语义和可访问名称。

2. linear-gradient 线性渐变

linear-gradient() 需要结合 background-image 使用。通过两个渐变色块，可以拼接出一个三角形。

第一步：绘制一个长方形

.triangle {
  width: 80px;
  height: 100px;
  background-repeat: no-repeat;
  outline: 1px solid skyblue;
}

第二步：添加一个渐变

下面的渐变会让元素的一部分呈现红色：

.triangle {
  background-image: linear-gradient(
    45deg,
    orangered 50%,
    transparent 50%
  );
}

第三步：调整渐变尺寸

为了让渐变只覆盖元素的一半，可以调整 background-size：

.triangle {
  background-size: 100% 50%;
}

由于渐变角度和元素宽高比不同，形状可能不符合预期。可以调整渐变角度，使三角形的边界落在目标位置：

.triangle {
  background-image: linear-gradient(
    32deg,
    orangered 50%,
    transparent 50%
  );
}

这里的 32deg 是针对示例尺寸调试得到的值，不是适用于所有宽高的通用值。

第四步：添加镜像渐变

再添加一个镜像方向的渐变：

.triangle {
  background-image:
    linear-gradient(32deg, orangered 50%, transparent 50%),
    linear-gradient(148deg, orangered 50%, transparent 50%);
}

最后通过 background-position 分别调整两个渐变的位置：

.triangle {
  background-position: top left, bottom left;
}

这样就得到了三角形效果。去掉调试用的 outline 后，完整代码如下：

.triangle {
  width: 160px;
  height: 200px;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(32deg, orangered 50%, transparent 50%),
    linear-gradient(148deg, orangered 50%, transparent 50%);
  background-size: 100% 50%;
  background-position: top left, bottom left;
}

linear-gradient 方案的特点

线性渐变可以创建很多形状，也适合制作背景纹理和装饰效果。但它的缺点是：

• 渐变角度和元素宽高比强相关；
• 修改尺寸后可能需要重新调试角度；
• 多层背景的定位和尺寸不够直观；
• 维护成本通常高于 border 和 clip-path。

如果只是绘制一个简单三角形，通常不建议优先选择这种方案；如果三角形是复杂背景的一部分，渐变则可能更合适。

3. clip-path

最后一种方法是 clip-path。它的代码通常更简洁，也更容易扩展为其他多边形。

clip-path 会定义元素的可见区域。浏览器不会绘制裁剪路径以外的区域，因此可以先创建一个带背景色的长方形，再将它裁剪成三角形。

现代 Chrome、Edge、Firefox 和 Safari 对 clip-path: polygon() 的支持已经较好，但如果项目需要兼容较旧浏览器，仍应提供降级方案。

第一步：绘制长方形

.triangle {
  width: 80px;
  height: 100px;
  background-color: skyblue;
}

第二步：使用 polygon() 裁剪

下面绘制一个指向右侧的三角形：

.triangle {
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}

polygon() 中的每一组坐标代表路径上的一个点。本例定义了三个点：

• top-left (0 0)：左上角；
• bottom-left (0 100%)：左下角；
• right-center (100% 50%)：右侧中心。

连接这三个点，就得到一个指向右方的三角形。

完整代码如下：

.triangle {
  margin: 100px;
  width: 160px;
  height: 200px;
  background-color: skyblue;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}

可以使用在线工具尝试 clip-path 并绘制不同的图形：Clippy。

clip-path 的兼容性与注意事项

可以使用 @supports 检测当前浏览器是否支持：

.triangle {
  width: 160px;
  height: 200px;
  background: skyblue;
}

@supports (clip-path: polygon(0 0, 100% 0, 50% 100%)) {
  .triangle {
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }
}

需要注意：

• clip-path 只裁剪视觉区域，不会自动改变元素的布局尺寸；
• 裁剪区域以外的部分不可见，交互行为也应单独测试；
• 复杂路径可能增加绘制成本；
• 三角形如果只是装饰，应使用 aria-hidden="true" 或其他方式避免干扰屏幕阅读器；
• 如果三角形表达“展开”“返回”等含义，应提供按钮名称或可访问文本。

三种方案对比

选择建议

1. 只需要一个简单的小三角形时，优先使用 border；
2. 三角形属于复杂背景的一部分时，可以使用 linear-gradient；
3. 需要响应式尺寸、复杂多边形或多个顶点时，可以使用 clip-path；
4. 需要精确控制路径、描边、填充和无障碍语义时，优先考虑 SVG；
5. CSS 三角形只是视觉表现，不能代替按钮、链接等交互元素本身。

总结

CSS 可以通过多种方式绘制三角形。本文介绍了三种常见方案：

• border：利用零尺寸元素的边框交汇区域绘制三角形，简单且兼容性最好；
• linear-gradient：通过多个渐变背景拼接三角形，适合复杂背景，但依赖角度和尺寸调试；
• clip-path：先绘制元素，再裁剪出三角形，表达清晰且容易扩展，现代浏览器支持较好。

如果只绘制一个普通箭头，border 通常已经足够；如果需要更强的形状控制，可以选择 clip-path 或 SVG。无论使用哪种方式，都应同时考虑响应式尺寸、布局、点击区域和可访问性。

参考资料

• MDN：border
• MDN：linear-gradient()
• MDN：background-position
• MDN：clip-path
• MDN：polygon()
• Clippy：CSS clip-path 生成工具