ZeroTool Workbench
CSS 三角形生成器
通过 border hack 生成任意方向的 CSS 三角形，选择方向、尺寸和颜色，即时获得可用的 CSS 代码。免费在线工具。
使用方法
- 点击 3×3 方向网格中的按钮，选择三角形的朝向。
- 设置宽度和高度（像素）以控制三角形尺寸。
- 通过颜色选择器或直接输入十六进制颜色值来选色。
- 实时预览区域会即时更新，并提供对比背景，方便在明暗模式下都能清晰看到三角形。
- 点击 CSS 区块旁的复制按钮即可复制
.triangle { … }规则，或单独复制 HTML 用法示例。
理解生成的 CSS
生成的规则始终以 width: 0 和 height: 0 开始。
对于四个基本方向（上、右、下、左），两个透明 border 定义三角形的基础宽度，一个实色 border 定义高度。
对于对角方向（如左上），一个实色 border 和一个透明 border 从角落裁出一个直角三角形。
将输出粘贴到样式表中，并将 .triangle 改为你自己的类名。
常见使用场景
CSS 三角形常用于工具提示箭头、下拉菜单指示符、装饰性区块分隔线、面包屑分隔符以及气泡对话框的尾部。 由于是纯 CSS，无需图片，加载极快，且便于通过 CSS 变量进行主题定制。
FAQ
CSS 三角形的原理是什么？
CSS 三角形通过将元素的 width 和 height 设为 0，再利用 border 来形成三角形。当相邻的 border 以透明角度相交时，便形成可见的三角形。例如，透明的左右 border 加上实色的下 border，可产生一个朝上的三角形。
什么是 CSS 三角形的 border hack？
border hack 是将元素尺寸设为 0，并有选择地设置 border。实色 border 构成可见边，透明 border 构成不可见边。每个 border 的大小控制三角形的宽高。这是纯 CSS 技术，无需图片或 SVG。
width 和 height 对各方向分别控制什么？
对于上下三角形，width 设置水平总宽度，height 设置三角形的高度。对于左右三角形，width 设置三角形的延伸宽度，height 设置垂直总高度。对于对角三角形（如左上），width 和 height 共同控制切割三角形的矩形角的大小。
我应该使用 CSS 三角形还是 SVG 三角形？
CSS 三角形不需要外部资源，适合工具提示箭头、徽章指示、分隔线等小型装饰图形。SVG 三角形则更适合任意角度旋转、渐变填充或需要缩放的场景。对于简单的方向指示，CSS border hack 是最简洁、最轻量的选择。
CSS 三角形支持暗黑模式吗？
支持。由于三角形由 border 构成，你可以用 CSS 自定义属性或暗色模式媒体查询来覆盖 border 颜色。例如，使用 CSS 变量作为颜色值，即可在明暗主题之间自动切换。