工具简介
CSS 三角形生成器是工具派推出的免费在线前端小工具，专为「用纯 CSS 画三角形」这一经典需求而生。CSS 本身并没有三角形图形，标准做法是利用 border 边框拼接技巧：把元素的宽高设为 0，再给其中一条边框上色、其余边框设为透明，就能拼出各种朝向的三角形。本工具把这套技巧完全可视化：你只需点选方向和类型，拖动滑杆调整宽高与旋转角度、挑选颜色，右侧就会实时预览三角形效果，并同步生成标准的 .triangle CSS 代码，支持一键复制纯 CSS 或 HTML+CSS 片段，粘贴到项目里即可使用，全程无需手写一行边框代码。
参数说明
| 参数 | 说明 | 默认值 / 取值范围 |
|---|---|---|
| 方向 | 三角形尖角朝向，共 8 个按钮：上、右上、右、右下、下、左下、左、左上。斜向（右上/右下/左下/左上）生成的是贴角直角三角形 | 默认「上」 |
| 三角形类型 | 等腰 / 直角 / 等边 三种。注意：选择斜向方向时类型固定为直角，按钮会自动禁用 | 默认「等腰」 |
| 宽度 | 三角形底边宽度，滑杆范围 10–300px，也可在右侧数字框输入 1–300 | 默认 100px |
| 高度 | 三角形高度，滑杆 10–300px，数字框 1–300。选择「等边」类型时高度按宽度自动计算，不可手调 | 默认 80px |
| 旋转 | 在方向基础上再整体旋转，生成 transform: rotate()，滑杆与数字框均支持 0–360° |
默认 0° |
| 颜色 | 三角形填充色，可用取色器点选，也可直接输入十六进制色值（如 #3b82f6） |
默认 #3b82f6 |
使用步骤
打开工具页面：进入工具派「CSS 三角形生成器」，左侧是参数面板，右侧上方是实时预览区、下方是代码区，默认已生成一个朝上的蓝色等腰三角形。
选择方向：在「方向」区的 8 个按钮中点选尖角朝向（上 / 右上 / 右 / 右下 / 下 / 左下 / 左 / 左上），选中的按钮会高亮为蓝色。
选择类型：在「三角形类型」中选择等腰、直角或等边；若第 2 步选了斜向方向，此处会锁定为直角，并提示「斜向三角形固定为直角三角形」。
调整尺寸：拖动「宽度」「高度」滑杆，或在右侧数字框精确输入像素值（1–300px）。等边类型下高度自动按
宽度 × √3 / 2计算，高度滑杆禁用。设置旋转与颜色：需要任意朝向角度时调整「旋转」（0–360°）；用取色器点选或在色值输入框中填写十六进制颜色。
复制代码：右侧代码区实时同步生成结果，点「复制 CSS」只复制样式，点「复制 HTML+CSS」会连同
<div class="triangle"></div>结构一起复制，粘贴到你的页面即可生效。
使用技巧
- 气泡框小尾巴：选「上」方向、宽度约为高度的 2 倍，给气泡容器加
position: relative、三角形元素加position: absolute定位到边缘，就是标准的聊天气泡 / Tooltip 箭头。 - 角落折角装饰：选斜向方向（如「右上」）得到的直角三角形，绝对定位到卡片角落，可做出「折角」「角标」一类的装饰效果。
- 任意角度不必算三角函数：方向按钮只提供 8 个朝向，但叠加「旋转」即可得到任意角度，比如「上 + 旋转 90°」等效于朝右，适合需要精确角度的场景。
- 等边三角形零计算：做正三角形（如播放按钮 ▶）时直接选「等边」，高度自动按几何公式算出，不用自己按计算器。
- 需要描边三角形？ border 技巧本身无法直接加边框，常用方案是叠两个三角形：底层大一圈用边框色、上层用背景色，两个都可以用本工具分别生成再组合。
常见问题
Q1：为什么选斜向方向时，等腰 / 等边按钮变灰？
斜向（右上、右下、左下、左上）三角形由两条相邻边框拼接而成，几何上只能是等腰直角三角形，因此工具自动把类型锁定为「直角」并禁用选择，这是正常设计。
Q2：选「等边」后为什么不能调高度？
等边三角形的高与边长有固定比例（高 = 宽 × √3 / 2 ≈ 0.866 × 宽），工具按宽度自动算出高度并禁用高度滑杆，保证图形始终是标准正三角形。
Q3：生成的代码兼容性如何？
代码只用到 width / height / border / transform 等基础 CSS 属性，所有现代浏览器都支持，可直接用于生产项目；不使用旋转时连 transform 都不会出现。
Q4：旋转后三角形位置偏了怎么办？transform: rotate() 默认绕元素中心旋转，不影响文档流布局；如需改变旋转中心，可在复制的代码上追加 transform-origin 属性自行调整。