CSS 三角形生成器
生成一个纯 CSS 三角形，指向 8 个方向中的任何一个 — 经典的零尺寸边框技巧或现代 clip-path 多边形 — 使用您自己的宽度、高度和颜色，加上 HTML 代码片段和 SVG 预览。完全在您的浏览器中运行。
输入
三角形指向的方向 — 四个基本方向或直角三角形。
边框适用于各处，但不会留下内容框；clip-path 保留真实框，您可以在其中放置渐变。
用于生成的规则和 HTML 代码片段。
输出
您的三角形将出现在这里。
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-triangle-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"direction": "up",
"technique": "border",
"width": "100",
"height": "100",
"color": "#464aff",
"className": "triangle"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-triangle-generator` tool (CSS Triangle Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-triangle-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS 三角形生成器 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
| 每次 API/MCP 调用费用 | 5 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
三角形是 CSS 没有基本形状的少数几种形状之一。没有 shape: triangle，所以你要欺骗 — 要么滥用边框在角落相交的方式，要么将矩形剪裁成三个点。这个生成器为您编写两者：选择一个方向，设置宽度、高度和颜色，并复制完成的规则。
如何使用
- 选择三角形指向的方向 — 上、下、左、右，或四个直角三角形中的一个（左上、右上、右下、左下）。
- 选择一种技巧：边框技巧或
clip-path多边形（见下文了解如何选择）。 - 拖动宽度和高度直到预览看起来正确。每个方向都可以完全调整大小，包括角。
- 设置颜色和，如果您喜欢，一个类名 — 它用于 CSS 规则和 HTML 代码片段。
- 复制 CSS 和
<div>代码片段，或下载 SVG 预览，如果您更喜欢使用图像。
边框技巧还是 clip-path？
边框技巧给一个元素 width: 0; height: 0 和一个粗 border。因为相邻的边框沿对角线相交，四个边框区域中的每一个本身都是一个三角形 — 给一个着色，使其他三个 transparent，可见的结果就是一个三角形。它适用于曾经发货的每个浏览器，包括电子邮件客户端，这就是为什么它仍然是默认的。
其代价是没有内容框留下。您不能在元素内放置文本或图标，不能给三角形一个渐变或背景图像，也不能动画它的形状 — 仅其边框宽度。
clip-path: polygon() 保留一个真实的 width × height 框和真实的 background，然后裁剪三个点外的所有内容。这意味着三角形可以带有渐变、背景图像或框阴影（通过 filter: drop-shadow()），并且多边形本身可以过渡。在现代浏览器中支持是通用的，但在遗留引擎中不存在，在电子邮件中不可靠。
经验法则：clip-path 用于现代网站上的任何内容，边框技巧用于最大范围，或用于微小的装饰箭头，其中两个限制都不重要。
数字的含义
对于基本三角形，宽度是底部的长度，高度是从底部到顶点的距离。在生成的边框规则中，这显示为侧面的两个半宽（100px 宽的向上三角形得到 0 50px 100px 50px）。
对于角楔形，宽度和高度是直角的两条腿，它们直接映射到两个边框宽度 — 没有减半。这也是为什么即使一些生成器将其锁定为正方形，这里的角楔形也可以调整大小。
它在我的机器上运行吗？
是的。规则、HTML 代码片段和 SVG 预览都在您的浏览器中构建 — 没有上传任何内容，页面加载后工具可以离线运行。
我可以将其用于工具提示或下拉箭头吗？
这是经典用法。生成一个小的向下三角形（比如 12 × 6），然后使用 position: absolute 相对于工具提示主体定位它。在这里使用边框技巧 — 箭头是装饰性的，所以缺少的内容框对您没有成本，您可以获得无处不在的支持。
如果我需要不同的形状怎么办？
对于任何有超过三个点的东西 — 六边形、星星、箭头、语音气泡 — 使用 CSS Clip-Path 生成器，它构建任意多边形和其他剪辑形状。要改为圆化普通框的角，请参阅 Border Radius 生成器；要在得到三角形后旋转或倾斜它，CSS Transform 生成器 写出匹配的 transform 值。