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


## 工具简介

**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` 属性自行调整。


工具派免费在线 CSS 三角形生成器，可视化调整 8 个方向、等腰/直角/等边类型、宽高尺寸、0-360° 旋转与颜色，右侧实时预览并一键复制 CSS 或 HTML+CSS 代码，前端开发效率利器。

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