CSS 三角形生成器
CSS 三角形生成器，是指在线选择方向、调节宽高与颜色，实时预览并一键复制纯 CSS 三角形代码的前端工具。它免费、无需注册，支持上下左右与四个斜角共 8 个方向、等腰/直角/等边三角形、border 与 clip-path 两种写法，以及带边框的对话框小三角。预览区直接渲染生成的样式，还能拆开四条边框看清原理。计算全在浏览器本地完成，内容不上传。
底边 100px · 深度 60px · 顶角 79.6°
从左往右量，50% 为等腰
支持 HEX 与 rgb() / rgba()；取色器不支持透明度，半透明色请手输
快捷按钮只做一次性赋值，之后可以继续手调
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 60px 50px 0 50px;
border-color: #3b82f6 transparent transparent transparent;
}
如何使用CSS 三角形生成器
在九宫格里点三角形尖端朝向，拖滑杆调宽高、顶点位置并选颜色；顶点放在 50% 就是等腰三角形。
按需点「等腰 / 等边 / 直角等腰」一次性设好比例，或切到「气泡箭头」设置描边宽度、描边色与箭头位置。
在 border 写法、clip-path 写法、气泡箭头三种输出之间切换，点「复制代码」把 CSS 三角形代码粘进项目。
关于CSS 三角形生成器的常见问题
- CSS 用 border 画三角形的原理是什么？
- 把元素的 width 和 height 设为 0，它就只剩四条边框；相邻两条边在角上以一条斜线分界，于是每条边都退化成一个三角形。保留与尖端方向相反的那条边并涂色，相邻两条设为透明、尖端那条设为 0，剩下的就是一个三角形。例如朝下的 100×60 三角形，border-width 是 60px 50px 0 50px，涂色的是上边。本工具的「拆开看原理」会用四种颜色把四条边画出来。
- CSS 三角形用 border 还是 clip-path 好？
- border 写法兼容性最好、代码最短，但只能纯色，元素本身宽高为 0，点击区域和布局尺寸都不是三角形本身。clip-path 写法的元素有真实宽高，可以把 background 换成渐变或图片，但 box-shadow 会被一起裁掉，要阴影得改用 filter: drop-shadow。两种写法画的是同一个三角形，本工具两种都能生成，切换标签即可对照。
- 怎么用 CSS 给气泡对话框加一个小三角？
- 给气泡容器写 position: relative，再用 ::after 伪元素按 border 写法画一个三角形，用 top: 100%（箭头朝下时）把它挂到气泡外侧，沿边位置用 left 定位。三角形颜色要和气泡底色一致才能接上。本工具的「气泡箭头」标签会直接生成这三段规则，tooltip 箭头和下拉菜单的小三角也是同一个写法。
- CSS 三角形怎么加边框（描边）？
- 用两层伪元素叠：::before 用描边色画外层三角形，::after 用底色画一个略小的内层三角形盖在上面。内层不能只是把外层「缩小 1px」，那样斜边上的描边会比底边细。本工具按平行偏移算：两条斜边各内移 t，尖端沿中轴后退 d = t·√(b²+D²)/b，例如 20×10 的箭头、描边 1px 时 d ≈ 1.414。几何上尖端处沿中轴的描边厚度是 d，比 t 略厚，这是尖角的必然，不是误差。
- CSS 画等边三角形宽高怎么设置？
- 等边三角形的深度等于底边乘以 √3/2。底边 100px 时深度约 86.6px，三个内角都是 60.0°。用 border 写法时，朝下的等边三角形就是左右两边各一半底边、上边写这个深度。本工具点「等边」按钮会按当前底边自动算好深度，并在预览下方显示三个内角供你核对。
- CSS 三角形不显示是什么原因？
- 最常见的四个原因：一是用在 span 这类行内元素上，要加 display: inline-block 或 block；二是漏写 border-style: solid，边框根本不画；三是有色边写反了，尖朝下要涂的是上边；四是元素有 padding、line-height 或字号把内容区撑开，三角形会变成梯形，要把宽高和 padding 都清零、font-size 设成 0。
- 生成的 CSS 三角形代码要加浏览器前缀吗？
- border 写法不需要任何前缀，主流浏览器都支持。clip-path 的 polygon() 在现代浏览器里均支持无前缀写法，本工具因此不输出 -webkit-clip-path；只有极老的内核可能不支持，需要兼容时请自行补前缀并实测。
- CSS 三角形生成器能做直角三角形吗？
- 能。点九宫格四个斜角方向就是直角三角形，直角在你点的那个角上，宽高就是两条直角边；或者在上下左右方向把顶点位置拖到 0% 或 100%，也会得到直角三角形。「直角等腰」按钮会把深度设为底边的一半，例如底边 100px 时深度 50px，顶角正好 90°。
- CSS 下拉箭头小三角怎么用伪元素写？
- 在按钮或下拉框上写 position: relative，用 ::after 画一个朝下的小三角（例如 10×6），再用 position: absolute 加 right 与 top 把它放到右侧垂直居中。伪元素三角形不会增加 DOM 节点，展开时给它加 transform: rotate(180deg) 就能翻转。在本工具选「朝下」并把宽高调小，复制 border 写法里的声明即可。
- CSS 三角形能做成渐变色或圆角吗？
- border 写法本身只能纯色，不支持渐变。要渐变请用 clip-path 写法，把生成代码里的 background 换成 linear-gradient 即可，渐变代码可以用站内的 CSS 渐变生成器调。圆角三角形用这两种写法都做不到，需要 SVG 或更复杂的 clip-path 路径，本工具不生成。
CSS 三角形参数含义速查表
下表是 100×60 的 CSS 三角形在 8 个方向上的 border 写法，数值由本工具的生成逻辑现算。四个值的顺序永远是上、右、下、左。记住一句话就不会写反：有色边与尖端方向相反，尖朝下要涂上边。
| 尖端朝向 | border-width | border-color |
|---|---|---|
| 左上 | 60px 100px 0 0 | #3b82f6 transparent transparent transparent |
| 朝上 | 0 50px 60px 50px | transparent transparent #3b82f6 transparent |
| 右上 | 60px 0 0 100px | #3b82f6 transparent transparent transparent |
| 朝左 | 30px 100px 30px 0 | transparent #3b82f6 transparent transparent |
| 朝右 | 30px 0 30px 100px | transparent transparent transparent #3b82f6 |
| 左下 | 0 100px 60px 0 | transparent transparent #3b82f6 transparent |
| 朝下 | 60px 50px 0 50px | #3b82f6 transparent transparent transparent |
| 右下 | 0 0 60px 100px | transparent transparent #3b82f6 transparent |
这件事在英文里叫 CSS triangle generator 或 CSS arrow generator，中文也有人叫三角形代码生成、CSS 箭头生成，说的都是同一件事：调出一个三角形，复制走一段纯 CSS 代码。本工具的功能特点是 8 个方向加可调顶点、等边与直角一键设置、border 与 clip-path 两种写法互相校验、带描边的气泡箭头，以及拆开四条边框看原理；一键复制 CSS 三角形代码，内容不上传。
为什么四条 border 能拼出一个三角形
CSS 三角形原理只有一句：宽高为 0 的元素只剩边框，而相邻两条边框在角上是用斜线分界的。CSS 画三角形最经典的办法是 border —— 盒子的内容区缩成一个点后，每条边都从外侧的两个角连到这个点，退化成一个三角形。把其中一条涂色、两侧相邻的两条设为透明，就得到一个 border 三角形；透明的两条边宽度决定底边被顶点分成的两段，涂色那条边的宽度就是三角形的深度。
border 写法与 clip-path 写法怎么选
clip-path 三角形是先画一个真实宽高的矩形，再用 polygon() 按三个顶点裁出三角形。两种写法画出来的形状一样，差别在元素本身。
| 对比项 | border 写法 | clip-path 写法 |
|---|---|---|
| 能否渐变或图片填充 | 不能，只能纯色 | 能，把 background 换掉即可 |
| 能否加阴影 | box-shadow 画的是方盒子 | box-shadow 会被裁掉，改用 drop-shadow |
| 元素尺寸是否真实 | 宽高为 0，靠边框撑开 | 有真实宽高 |
| 点击区域 | 整个边框盒，含透明部分 | 只有三角形内部 |
| 兼容性 | 主流浏览器均支持 | 现代浏览器无前缀可用 |
想要渐变三角形，就用 clip-path 写法，把 background 换成站内 CSS 渐变生成器 调出的渐变即可。
气泡箭头：用伪元素给对话框加小三角
对话框小三角、tooltip 箭头也是同一个写法：气泡容器写 position: relative，再用 ::after 伪元素画一个 CSS 箭头挂在气泡外侧。伪元素三角形不占 DOM 节点，改颜色、改位置都只动样式。下拉箭头 CSS 也能这样写，只是把伪元素放在按钮内部。
本工具的气泡箭头只支持上下左右四个方向的等腰三角形 —— 斜角或不等边的箭头挂在气泡边上会歪，这时代码区不输出代码，而是给出「切到朝下」「设为等腰」一键修正。箭头位置可以居中，也可以指定箭头中线到气泡起始边的距离；定位用 calc() 减去半个底宽，不用 transform，免得和你自己的动画冲突。
带边框的三角形：两层伪元素叠出描边
CSS 三角形加边框，常见做法是 ::before 画描边色的外层三角形、::after 画底色的内层三角形盖在上面。问题在于内层该小多少：网上多数教程只把外层「加大 1px」，结果斜边上的描边比底边细。正确做法是把两条斜边各向内平移 t，尖端沿中轴因此后退 d = t·√(b²+D²)/b（b 是半个底宽、D 是深度）。
以朝下、20×10、描边 1px 的箭头为例，d ≈ 1.414，外层 border-width 是 11px 11px 0 11px，内层是 9.59px 9.59px 0 9.59px。两层的底边都从气泡描边内侧起画，内层正好盖住气泡那一段描边，箭头与气泡就接通了。
等边三角形与直角三角形的宽高怎么算
CSS 等边三角形：深度 = 底边 × √3/2。底边 100px 时深度约 86.6px，三个内角都是 60.0°。等腰三角形只要顶点在底边正中（顶点位置 50%）。CSS 直角三角形有两种做法：直接选四个斜角方向，宽高就是两条直角边；或者在上下左右方向把顶点拖到 0% 或 100%。直角等腰三角形的深度是底边的一半，底边 100px 时深度 50px。
输出数值最多保留 2 位小数，浏览器会按设备像素取整，1px 以内的差异不做承诺；斜边的抗锯齿由浏览器决定，不同缩放比下边缘可能略有锯齿。
三角形不显示或变形的常见原因
| 现象 | 原因 | 改法 |
|---|---|---|
| 完全不显示 | 用在 span 等行内元素上 | 加 display: inline-block 或 block |
| 完全不显示 | 漏写 border-style: solid | 补上边框样式 |
| 方向反了 | 有色边写反 | 涂与尖端相反的那条边 |
| 变成梯形 | padding、line-height 或字号撑开了内容区 | 宽高与 padding 清零，font-size 设为 0 |