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 年随处安全。
相关工具
Border Radius 生成器
独立拖拽四角、尝试椭圆半径、复制 CSS——内置 chat-bubble、pill、blob、tab 等预设。
颜色 0 0
CSS clip-path 构建器 (圆、椭圆、多边形、Inset)
CSS `clip-path` 属性可视构建器 — 选择形状 (圆、椭圆、inset、多边形)、用滑块调整数值或点击预览添加多边形顶点、复制即用 CSS 声明。内置 10 种形状预设 (三角形、六边形、星形、箭头、对话气泡、十字等)。
颜色 0 0
CSS 渐变生成器
用多色停靠点设计线性或径向 CSS 渐变并复制代码。
颜色 0 0
CSS Box Shadow 生成器
可视化设计 CSS box-shadow——多图层、实时预览、CSS / Tailwind 代码一键复制。
颜色 0 0
CSS 滤镜演练场
可视化组合 blur、brightness、contrast、hue、sepia、invert 等 9 项——复制 CSS 滤镜或 Tailwind 任意值。
颜色 0 0
CSS Cubic-Bezier 曲线生成器
拖动控制点设计 CSS 缓动曲线——实时预览运动，复制 cubic-bezier()。
颜色 0 0