# CSS 三角形生成器教程：8 个方向三种类型，一键复制代码

> 来源：工具派（https://gjupai.com） 原文页面：https://gjupai.com/tutorial/css-triangle-generator-guide

## 工具简介

**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` |

## 使用步骤

1. **打开工具页面**：进入工具派「CSS 三角形生成器」，左侧是参数面板，右侧上方是实时预览区、下方是代码区，默认已生成一个朝上的蓝色等腰三角形。

2. **选择方向**：在「方向」区的 8 个按钮中点选尖角朝向（上 / 右上 / 右 / 右下 / 下 / 左下 / 左 / 左上），选中的按钮会高亮为蓝色。

3. **选择类型**：在「三角形类型」中选择等腰、直角或等边；若第 2 步选了斜向方向，此处会锁定为直角，并提示「斜向三角形固定为直角三角形」。

![CSS 三角形生成器主界面：左侧参数面板含 8 个方向按钮、等腰/直角/等边类型切换、宽度/高度/旋转滑杆与颜色取色器；](article/202607/1783965764152_9030.png)

4. **调整尺寸**：拖动「宽度」「高度」滑杆，或在右侧数字框精确输入像素值（1–300px）。等边类型下高度自动按 `宽度 × √3 / 2` 计算，高度滑杆禁用。

5. **设置旋转与颜色**：需要任意朝向角度时调整「旋转」（0–360°）；用取色器点选或在色值输入框中填写十六进制颜色。

6. **复制代码**：右侧代码区实时同步生成结果，点「复制 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` 属性自行调整。