CSS 三角形生成器
可视化的 CSS 三角形生成器，支持方向、大小、颜色和旋转角度定制。
预览
提示：使用 CSS border 属性可以轻松创建三角形。
宽度100px
高度100px
旋转角度0°
颜色
CSS 代码
width: 0; height: 0; border-style: solid; border-width: 0 50px 100px 50px; border-color: transparent transparent #3b82f6 transparent;
关于此工具
CSS 三角形生成器是一个专门用于生成纯 CSS 三角形样式的在线工具。在网页设计中，三角形常用于对话框气泡、下拉菜单箭头、面包屑导航等场景。使用此工具，您无需手写复杂的 border 属性，只需通过直观的控件设置三角形的各项参数（方向、尺寸、颜色、旋转等），即可实时获取对应的 CSS 代码。生成的代码兼容所有主流浏览器，是前端开发者的必备利器。
功能特点
- 🔄 全方位支持：支持上、下、左、右及四个对角共 8 个方向
- 🎨 自由定制：可精确控制三角形的宽度、高度和颜色，支持拾色器与 HEX 手动输入
- 📐 旋转控制：支持 0-360 度任意旋转，满足特殊角度需求
- ⚡ 实时预览：所见即所得，调整参数立即看到效果，带棋盘格背景辅助对比
- 📋 一键复制：生成的 CSS 代码简洁规范，点击即可复制使用，复制状态有视觉反馈
- 🎲 随机生成：一键随机生成不同方向、尺寸、颜色和旋转角度的三角形
- 🛡️ 纯 CSS 实现：无需任何图片资源，加载更快，性能更好
- ⌨️ 键盘导航：支持方向键快速切换三角形方向，兼顾无障碍访问