CSS 三角形生成器
颜色
经典 CSS 三角形技巧：尺寸为 0 的元素加上较粗的彩色 border，就会变成指向有色边对面的三角形。本工具提供 8 个方向（上下左右 + 4 个直角三角形）、尺寸滑块与颜色选择器。可开启 "clip-path" 切换为现代写法——同样形状，无 border，宽高更易控制。
—
预览
CSS
.triangle {
width: 0;
height: 0;
border-bottom: 80px solid #5b8def;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
}基于 border 的三角形用尺寸为 0 的元素加较粗彩色 border——透明边互相抵消，只留下有色三角可见。
使用方法
- 选方向（▲▼◀▶ 或四个角）。
- 设尺寸与颜色。
- 如需更干净可启用 clip-path。
- 复制 CSS 到项目。
常见问题
- 为什么 border 能变三角？
- 宽 0 的元素加上较粗 border，会以一个点为中心绘成 4 个三角形。把 3 个设透明、1 个上色——只剩有色三角可见。
- border 与 clip-path 怎么选？
- border 更古老（IE6 也行），有微小抗锯齿差异。clip-path 更整洁，与背景/图片组合更易——新代码推荐。
- 能旋转吗？
- 非标角度可在 clip-path 模式调整 polygon 点。8 个内置方向覆盖箭头、工具提示、面包屑等大多场景。
- 浏览器支持？
- border 三角到处可用。clip-path 自 2016 起全浏览器支持——2026 年随处安全。