CSS 三角形生成器

工具介绍

CSS 没有专门的三角形形状，所以三角形通常靠一个广为人知的变通做法实现：让一个元素宽高都为零，给它一侧设实色边框，相邻的另外两侧设透明边框。因为相邻的边框在角上以 45 度相接，透明边框会收缩成一个尖角，最终只剩下有颜色的那一侧边框以三角形的样子露出来。

这个工具帮你搭好这套结构：选择三角形指向哪个方向、多大、什么颜色，实时预览会跟着更新，然后直接复制对应的 CSS。这也是整个 Web 上做纯 CSS 箭头、气泡提示框指针、下拉菜单小三角时用的同一套底层技巧。

来源：CSS Backgrounds and Borders Module Level 3, W3C —— 定义了相邻边框在角上相接的方式，这正是这种三角形技巧所依赖的机制。

为什么使用它？

• 实时预览直接渲染出真实的三角形，复制之前就能确认大小、方向和颜色是否合适。
• 上、下、左、右四个基本方向，一个控件就能全部覆盖。
• 不需要图片或 SVG——这样做出来的三角形只是几行 CSS 而已。
• 适合用作提示框指针、下拉菜单/手风琴的小三角、自定义列表符号，以及简单的装饰性图形。
• 全部在浏览器本地计算，你调整的任何参数都不会上传。
• 免费、不用注册，手机上也能用。

使用方法

1. 选择方向——哪一侧设成实色边框，三角形就会朝相反方向指。
2. 设置大小——这个数值会同时应用到三条边的 border-width，决定三角形显示得多大。
3. 给可见的那侧（实色）边框选一个颜色，它会变成三角形的填充色。
4. 复制生成的 CSS，应用到一个 width: 0、height: 0 的元素上——空的 <div>，或者 ::before/::after 伪元素都可以。

示例

输入

方向：向下 · 大小：60px · 颜色：#ea580c

输出

width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 60px solid #ea580c;

对于向下的三角形，实色放在 border-top 上，左右两条边保持透明——颜色所在的那一侧和三角形指向的方向正好相反。

为什么宽高必须是 0

这个技巧之所以有效，是因为元素本身没有内容盒——width: 0 和 height: 0 意味着整个可见图形完全来自各条边框在中心点相接的结果。如果元素有任何宽度或高度，边框就不会收缩成一个干净的尖角，图形也就散了。这也是为什么这个技巧在空 <div> 上和 content: "" 的 ::before/::after 伪元素上同样好用——根本不需要实际内容，只需要边框盒。

MDN 关于 CSS border 属性的文档说明了 border-width、border-style、border-color 是如何组合的，也包括相邻两侧的边框如何在对角线上相接（developer.mozilla.org/en-US/docs/Web/CSS/border）——这正是整套技巧所依赖的几何原理。

CSS 三角形的常见用途

• 提示框/气泡指针：在圆角框边缘放一个小三角形（6–10px），颜色和框的背景色一致。
• 下拉菜单/select 小三角：在按钮或 select 元素旁边放一个向下的小三角，表示可以展开菜单。
• 手风琴/展开指示符：一个向右的小三角，在区块展开时旋转指向下方。
• 自定义列表符号：用一个向右的小三角替代浏览器默认的列表符号，做出更有辨识度的列表样式。
• 简单的横幅/丝带角标：在卡片角落塞一个三角形，模拟折角丝带效果。

配合其他 CSS 工具一起用

用作提示框指针的三角形通常需要配一个投影，才能和它附着的方框在视觉上融为一体——「盒阴影生成器」可以生成这个阴影。对于三角形之外更复杂的界面图形（人字箭头、星形、六边形），现代做法通常更推荐用 clip-path，而不是叠加更多的边框技巧。

→ 盒阴影生成器 · 圆角生成器

常见问题