设计配色 · 阴影 / 边框

Triangle 生成

CSS 三角形/任意角度

✓本地处理 · 不上传 ✓免费 · 无需登录 ✓无次数限制累计 97 次使用

方向Direction · 上下左右 + 四角直角

dir

形状Shape · 等腰 / 等边 / 直角 / 任意

类型 type

底宽 base 120px

高 height 90px

旋转 rotate 0°

箭头Arrow · 空心 = 双层描边箭头

空心箭头

颜色Color

填充 fill

预设Gallery · 三角 / 箭头 / 气泡尾巴 / 播放

提示气泡
tooltip tail ↓

border ▲ 朝上三角

就绪 · border / clip-path 双法实时生成 · 全程浏览器本地处理

第一节

关于本工具

About

设计师在 Sketch 里画了个 45° 的三角箭头，切图后边缘锯齿、角度对不上——因为 UI 工具没有精确的三角形参数面板。输入宽高与旋转角度，它直接输出一段 CSS clip-path 代码，角度误差控制在 0.1° 以内，无需切图、不依赖任何设计软件。代码生成全在浏览器内完成，不经过任何服务器。

使用场景

壹

导航栏下拉箭头

UI 设计师接到需求：二级导航菜单需要一个朝下的三角形箭头，hover 时旋转 180° 变为朝上。传统做法是切一张 16×16 的 PNG 图标，但深色模式切换后图片背景会露白。用本工具生成一段纯 CSS 三角形代码，设置 `border-top` 为 6px 实线、左右为 6px 透明，再配合 `transform: rotate(180deg)` 即可实现无图标的响应式箭头，省去图片加载和适配两套图标的麻烦。

贰

网页加载占位骨架

前端开发者在做新闻列表页时，需要一种「内容正在加载」的视觉反馈。常见的做法是用灰色矩形块占位，但过于呆板。改用本工具生成一个 45° 倾斜的浅灰色三角形，配合 CSS 动画让它从左到右扫过，模拟「数据正在刷新」的动效。三角形角度通过输入框精确设为 45°，宽度 100%、高度 12px，代码直接复制进 Less 文件，比手写 `clip-path` 快 3 倍。

叁

折线图数据标记点

数据分析师在制作季度销售额报表时，需要在折线图的每个数据节点上标注一个向下的三角形，指向具体数值。如果用 SVG 手动绘制，每个点都要写 `<polygon points="...">` 并计算坐标。用本工具生成一个 8×8 的等边三角形 CSS 代码，设置 `border-left` 和 `border-right` 为 4px 透明、`border-top` 为 8px 实色，然后通过 `position: absolute` 定位到每个数据点上方。3 个季度共 12 个节点，复制粘贴 12 次即完成，比逐一画 SVG 节省了 20 分钟。

肆

游戏血条方向指示

独立游戏开发者做一款 2D 俯视角射击游戏，需要在玩家角色头顶显示一个指向当前目标的三角形血条。目标在左侧时箭头朝左，在右侧时箭头朝右。用本工具生成两个方向的三角形 CSS 代码：朝左的 `border-right` 为 10px 实色、上下为 10px 透明；朝右的 `border-left` 为 10px 实色、上下为 10px 透明。通过 JavaScript 动态切换 `class` 即可实现方向跟随，无需加载任何精灵图，游戏包体减小了 12KB。

伍

PPT 流程图分支箭头

产品经理在画用户注册流程图时，需要「同意协议」和「不同意」两个分支的箭头。PPT 自带的箭头形状拐角生硬，且无法精确控制角度。用本工具生成一个 30° 的细长三角形作为分支箭头，设置 `border-bottom` 为 2px 实色、左右为 30px 透明，复制粘贴到 PPT 中，旋转对齐到分支线末端。整个流程图 8 个分支，只用 2 分钟就完成了箭头标注，比用形状工具手动绘制快了 5 倍。

第二节

使用指南

Getting Started

使用步骤

1在「方向」下拉菜单选择三角形朝向（上/下/左/右），预览区同步更新箭头指向
2在「宽度」和「高度」输入框分别填入像素值（如 100 和 80），预览区三角形实时缩放
3点击「颜色」拾色器选取色值，或直接输入十六进制码（如 #FF6600），三角形立即变色
4勾选「边框」选项并设定边框宽度与颜色，预览区显示带边框的三角形效果
5点击「生成代码」按钮，下方代码框自动输出对应的 CSS 样式，可直接复制使用

输入输出示例

输入	输出	说明
宽度 100px，高度 100px，方向下，颜色 #FF0000	border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #FF0000;	常规：最常用的等边直角三角形（等腰直角），验证基础方向与颜色输出
宽度 200px，高度 80px，方向右，颜色 rgba(0, 128, 255, 0.5)	border-top: 40px solid transparent; border-bottom: 40px solid transparent; border-left: 200px solid rgba(0, 128, 255, 0.5);	常规：非等边三角形，验证宽高比与半透明颜色（rgba）的兼容输出
宽度 0px，高度 50px，方向上，颜色 #000	border-left: 0px solid transparent; border-right: 0px solid transparent; border-bottom: 50px solid #000;	边界：宽度为 0 时，三角形退化为一条垂直线，验证工具是否仍输出有效 CSS（部分工具会报错）
宽度 100px，高度 0px，方向左，颜色 #333	border-top: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 100px solid #333;	边界：高度为 0 时，三角形退化为一条水平线，验证工具对零高度的处理
宽度 100px，高度 100px，方向左上，颜色 #00FF00	border-top: 100px solid #00FF00; border-right: 100px solid transparent; border-bottom: 0px solid transparent; border-left: 0px solid transparent;	边界：方向为斜角（左上/右上/左下/右下），验证工具是否支持非标准四方向
宽度 100px，高度 100px，方向下，颜色 #FFF	border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #FFF;	易错：白色三角形在白色背景上不可见，提醒用户注意颜色与背景对比
宽度 100px，高度 100px，方向下，颜色 invalid	（工具返回错误提示或空值）	易错：颜色值格式错误（如 'invalid'），验证工具对非法输入的容错与反馈

常见错误对照

1.border 宽度设为 0，三角形不显示

✗ 错误border: 10px solid transparent; border-top: 10px solid red;

✓ 修复border-width: 0 10px 10px; border-style: solid; border-color: transparent transparent red;

CSS 三角形依赖 border 区域，若 border 宽度为 0 则无可见区域。必须为各边设置非零宽度，并用 transparent 隐藏其余边。

2.用 border-radius 实现三角形，结果变圆角

✗ 错误border: 10px solid transparent; border-bottom: 10px solid red; border-radius: 5px;

✓ 修复border: 10px solid transparent; border-bottom: 10px solid red;

border-radius 会裁剪 border 区域形成圆角，破坏三角形尖锐边缘。三角形需保持 border-radius: 0。

3.只设一条边，其他边不设 transparent

✗ 错误border-bottom: 20px solid red;

✓ 修复border: 0 10px 20px; border-style: solid; border-color: transparent transparent red;

CSS 盒模型中 border 各边独立，只设一条边时其他边默认 width: medium（约 3px），会形成矩形而非三角形。必须显式设其他边为 0 或 transparent。

4.用 width/height 非零值，三角形变形

✗ 错误width: 50px; height: 50px; border: 20px solid transparent; border-bottom: 20px solid red;

✓ 修复width: 0; height: 0; border: 20px solid transparent; border-bottom: 20px solid red;

元素宽高非零时，border 会围绕内容区绘制，产生梯形而非三角形。必须将 width/height 设为 0，让 border 交汇于一点。

5.方向参数写错，三角形朝向反了

✗ 错误border-top: 20px solid red; 期望朝下

✓ 修复border-bottom: 20px solid red;

CSS 三角形方向由着色边决定：border-top 着色 → 三角形朝下；border-bottom 着色 → 朝上。着色边与期望朝向相反。

6.用百分比单位设置 border-width，浏览器不解析

✗ 错误border-width: 10%;

✓ 修复border-width: 20px;

CSS 规范中 border-width 不支持百分比单位（仅支持长度值或关键字）。百分比值会被忽略，回退为 medium（约 3px），导致三角形尺寸异常。

7.忘记设置 border-style，三角形不显示

✗ 错误border: 20px solid transparent; border-bottom: 20px red;

✓ 修复border: 20px solid transparent; border-bottom: 20px solid red;

border 简写或单独属性必须包含 border-style，否则默认值为 none，所有 border 不渲染。即使设了宽度和颜色，无 style 则不可见。

第三节

工作原理

How It Works

核心公式

border-width = 高度 × tan(θ/2) × 2

变量说明

高度三角形垂直高度，单位 px
θ三角形顶角角度，单位度

示例

生成顶角 60°、高度 100px 的三角形：border-width = 100 × tan(30°) × 2 = 100 × 0.57735 × 2 ≈ 115.47px。左右 border 宽度设为 115.47px，上 border 宽度 100px，左右 border 透明，上 border 着色，即得等边三角形。

用户输入本地处理输出结果

第五节

常见问题

Q & A

问这个工具生成的三角形代码能直接用在网页上吗？＋

答

能。页面生成的 CSS 代码是完整的 border 技巧实现，复制 .triangle 类定义直接粘贴到样式表即可。注意：如果父容器有背景色，需要给三角形元素设置 display: block 或 inline-block，否则 display 默认 inline 可能导致不显示。另外生成器默认不包含 position 定位，需要自行调整 left/top 或 margin。

问为什么我调了角度 45 度，出来的三角形看起来不像 45 度？＋

答

这里“角度”指的是三角形顶角（顶点处两条边的夹角），不是底边与水平面的夹角。比如设 45 度时，顶点很尖，底边相对较宽。如果你想要的是“倾斜三角形”（如等腰直角三角形），需要分别设置底边宽度和高度比例，而不是直接调角度。工具里角度参数只控制顶角大小，底边由宽度决定，高度由角度和宽度共同算出。

问能不能生成带边框的三角形？比如空心三角形？＋

答

这个工具只输出纯色填充的三角形 CSS（border 法）。要实现空心三角形，可以在生成的三角形上叠加一个同形状但尺寸略小、颜色为背景色的三角形，用伪元素或嵌套元素做遮罩。或者改用 clip-path: polygon() 方案，然后加 border。本工具不提供边框选项，需要手动组合。

问生成的三角形在手机 Safari 上显示不对，怎么办？＋

答

Safari 对 border 方式的三角形支持良好，常见问题是父容器设置了 -webkit-overflow-scrolling: touch 或 transform 触发硬件加速导致子元素渲染偏移。尝试给三角形元素加 -webkit-transform: translateZ(0) 强制合成层。另外检查是否在 <meta viewport> 中设置了 width=device-width，否则缩放可能导致像素偏移。

问能不能生成箭头形状？比如向右的箭头，不是纯三角形。＋

答

本工具只生成单一三角形，不生成箭头（三角形+矩形组合）。要做出箭头，可以先生成一个等腰三角形，再在旁边用伪元素或额外元素画一个矩形拼接。更简单的方案是用 Unicode 箭头字符（→）或 SVG，但如果是纯 CSS 箭头，需要两个元素组合。工具目前没有组合模式。

问这个工具是纯前端生成吗？上传我的图片会不会泄露？＋

答

完全纯前端，所有计算在浏览器内完成，没有任何数据上传到服务器。三角形生成只涉及 CSS 数值计算（角度→border-width 比例），不需要网络请求。即使断网也能正常使用。生成的代码只存在你复制出去的剪贴板里，页面不会保存任何数据。

问我设了宽度 200px，角度 60 度，高度是多少？＋

答

高度由角度和宽度共同决定，公式：高度 = (宽度 / 2) / tan(角度 / 2)。以 200px 宽、60 度顶角为例：tan(30°) ≈ 0.577，高度 ≈ 100 / 0.577 ≈ 173px。工具结果区会直接显示计算出的高度值（px），不需要手动算。注意这个高度是三角形从顶点到底边的垂直高度，不是斜边长度。

问为什么我复制代码后三角形显示成梯形？＋

答

梯形通常是因为你把 border 的四个方向都保留了。本工具生成的 CSS 只保留三个方向的 border，其中一个方向设为透明。如果你手动修改了代码，或误将生成代码中的 transparent 改成了颜色，就会变成梯形。检查 border-left/right/bottom 中是否有一个是 transparent。正确结构：一个方向有色，相邻两个方向透明，对边方向透明。

隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。