CSS 画三角形到底有几种：三种最常用方式讲清

你写页面时八成遇到过「想画个箭头、气泡尖角、下拉小三角」的需求，这时候就要知道 CSS 画三角形到底有几种。核心结论先给你：最常用的是 border 边框法、clip-path 裁切法和 linear-gradient 渐变法三种，它们各有适用场景——border 法兼容性最好、clip-path 最灵活、渐变法最适合做方向可控的小箭头。选哪种，取决于你要的三角形是否需要响应交互、是否要任意角度。编程狮的 CSS 入门课程里专门有一节对比这三种写法，下面我们把它们逐个拆开讲，让你一次记牢。

CSS 画三角形三种方式对比封面

一、为什么用 CSS 画三角形

很多人第一反应是「直接用图片不就行了」。确实，切一张 PNG 三角最简单，但图片有体积、有锯齿、换颜色还得重新导出，维护成本并不低。用 CSS 画三角形，颜色、大小、方向都能用代码直接改，改个字号就能跟着缩放，还能配合 hover 变色，这是图片做不到的。

更现实的需求是「气泡框的小尖角」。聊天框、提示框几乎都要一个指向来源的三角，这种高频又微小的装饰，用 CSS 生成最顺手，不占额外请求，也更利于主题换色。

理解了动机，你会发现 CSS 画三角形不是炫技，而是「用最轻量的方式解决一个高频小需求」。下面三种方式，覆盖了从兼容性优先到灵活性优先的全部场景，你可以按项目要求挑。

二、用 border 边框法（最经典）

border 法是最经典、兼容性最好的方案，原理很巧妙：当一个元素的宽高都是 0，四条 border 会表现为四个三角形拼在一起，你只要把其中三条设为透明，剩下的那条就是你要的三角形。

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 80px solid #3498db;
}

上面这段代码让左右 border 透明、下边实色，于是露出的就是朝上的三角形。想换方向，就改哪条边实色：要朝下就把 border-top 设实色、其余透明；要朝右就把 border-left 实色。尺寸由两个 border 的宽度和底边宽度共同决定。

想系统看 border 相关的所有技巧，可以翻 CSS 教程里盒模型那一章。border 法的优点是对老浏览器友好、代码极短；缺点是不支持圆角、做不出带弧度的形状，而且三角形角度被边框宽度「锁死」，不够灵活。

三、用 clip-path 裁切法

clip-path 是现代方案里最灵活的。它通过对元素「裁剪」出一个形状来工作，polygon 语法让你用坐标点画出任意多边形，三角形只是最简单的一种。

.triangle {
  width: 100px;
  height: 100px;
  background: #3498db;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

这里三个坐标点分别是「顶部中点、左下、右下」，连起来就是一个正三角形。想换尖角朝向，改一下坐标百分比就行，比如把第一个点移到左侧就能得到朝右的三角形。clip-path 的强项是能裁出任意角度、任意边数的图形，远不止三角形。

它的代价是需要较新的浏览器支持，并且被裁掉的部分不响应鼠标事件，点击空白三角区域是点不到的。如果你要的是「能精确控制形状」且不需要古老兼容，clip-path 是首选。配合 CSS 变量，你甚至能让三角形角度随数据动态变化。

四、用 linear-gradient 渐变法

渐变法走的是另一条路：利用背景渐变的「硬边」制造出三角形的视觉边界。把渐变角度设成 45 度，让一半是颜色、一半透明，就切出了一个直角三角形。

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

这段代码的含义是：从 45 度方向看，前半段是蓝色、后半段透明，两者的硬边界正好是一条对角线，于是得到一个直角三角形。想要不同方向的直角三角，改 linear-gradient 的角度和颜色停靠点即可，比如 135 度、225 度、315 度分别对应另外三个朝向。

渐变法的优势是「方向可控、写起来短」，做那种指向明确的小箭头特别顺手。缺点是只能得到直角三角形，想要等腰或钝角三角就不合适了。它同样依赖较新的浏览器，但渐变本身的兼容性已经相当好。

五、三种方式怎么选

把前面三种放一起对比就清楚了：border 法胜在兼容性和极简，适合需要照顾老旧环境、又要一个普通尖角的场景；clip-path 胜在形状自由，任意角度任意边数都能裁，适合现代项目里需要灵活图形的地方；linear-gradient 胜在方向可控且代码短，最适合做直角边的小箭头和指示标。

想立刻试手感，可以用 CSS 在线运行把三段代码分别粘进去改参数看效果。我的建议是：做气泡框小尖角优先 border 法，做数据可视化或自定义图标优先 clip-path，做工具栏方向箭头优先 linear-gradient。把这三者各自的「看家本领」记住，以后遇到三角需求你就能秒选，不再对着搜索引擎发呆。

CSS 画三角形三种方式怎么选

总结

CSS 画三角形到底有几种，最实用的就是 border 边框法、clip-path 裁切法和 linear-gradient 渐变法三种。border 法靠「零宽高加透明边框」拼出三角形，兼容性最好、代码最短，但角度被锁死；clip-path 用坐标点裁切，能画出任意角度和边数的图形，最灵活但需现代浏览器；linear-gradient 用硬边渐变得到直角三角形，方向可控、写法简洁，最适合小箭头。三者没有绝对优劣，只有场景之分：老旧兼容选 border，形状自由选 clip-path，方向箭头选渐变。编程狮建议把这三段代码都存进自己的片段库，下次要用直接改参数，省时又省心。

延伸学习

想系统学 CSS，跟着 CSS 入门课程从选择器一路学到布局与图形。
不确定前端该怎么循序渐进，看这篇前端零基础学习路径笔记，规划更清晰。
写样式需要查属性，常备 CSS 参考手册查起来最快。

常见问题

Q：为什么 border 法要把宽高设成 0？

A：因为只有宽高为 0 时，四条 border 才会收拢成四个三角拼块。
一旦有宽高，border 就贴在盒子四周，不再呈现三角形状。
设成 0 后再把三条边变透明，剩下的实色边就是你要的三角形。

Q：三种方法里哪种兼容性最好？

A：border 边框法兼容性最好，几乎支持所有浏览器包括很老的版本。
clip-path 和 linear-gradient 需要较新的浏览器才完整支持。
如果项目要照顾老旧环境，优先选 border 法最稳妥。

Q：clip-path 能画出三角形以外的形状吗？

A：能，polygon 可以写任意多个坐标点，想画几边形都行。
它还能配合 circle、ellipse 等函数裁出圆和椭圆。
所以做图标、自定义图形时，clip-path 比另外两种方法灵活得多。

Q：linear-gradient 法只能画直角三角形吗？

A：基本只能得到直角三角，因为硬边渐变天然沿对角线切分。
想要等腰或任意钝角三角，更合适的是 border 法或 clip-path。
它适合做方向明确的直角小箭头，优势在写法短、方向好调。