Softonic

CSS三角形生成器

步 1 / 2
下一个

经典的 CSS 三角形其实根本不是真正的三角形，它是一个零宽度、零高度的元素，拥有三条透明边框和一条彩色边框，这些边框恰好在一点交汇。该生成器会按你选择的像素值和填充颜色，为你生成四个方向（上、下、左、右）的样式声明。非常适合用于工具提示箭头、气泡对话框以及面包屑分隔符等场景。

如何构建边框三角形

  1. 1

    选择方向

    向上、向下、向左或向右。方向决定了哪条边框会显示颜色，哪三条边框保持透明。

  2. 2

    设置大小

    该尺寸值应用于所有边框宽度。60px 的三角形宽度为 120px（或高度为 120px，取决于方向）。

  3. 3

    选择填充颜色

    颜色输入仅支持 hex 值（例如 `#10b981`），不支持 rgb、rgba 或具名颜色。该颜色仅应用于对侧的那条边框。

  4. 4

    复制 CSS 规则

    输出的是完整的 `.triangle { ... }` 规则集，将它放入你的样式表，并在需要的位置添加 `<div class="triangle"></div>`。

为什么这种边框技巧能够奏效

当一个盒子的 width: 0 且 height: 0 时，它的四条边框会汇聚于同一个中心点。由于边框以 45 度角斜接，每条边框本身就是一个三角形，只是其中三个恰好不可见。给某一条边框着色，你就能看到那个三角形。

方向对照表

方向 可见边框 透明边框
上 border-bottom border-left、border-right、border-top
下 border-top border-left、border-right、border-bottom
左 border-right border-top、border-bottom、border-left
右 border-left border-top、border-bottom、border-right

尺寸计算

三条透明边框共用同一个尺寸值，可见边框也采用相同的尺寸。因此，size: 60 的三角形为：

  • 宽度 = 2 × 60 = 120px（适用于向上/向下的三角形）
  • 高度 = 2 × 60 = 120px（适用于向左/向右的三角形）

如需制作不对称三角形（底边较窄、顶点较高），请为透明边框设置一种尺寸，为可见边框设置另一种尺寸，例如 border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 40px solid red; 就能生成一个又高又窄、朝上的三角形。

何时改用 SVG

  • 你需要多个顶点，而不是三个，请使用 <polygon>。
  • 三角形需要随父元素平滑缩放，请使用 viewBox 和 preserveAspectRatio。
  • 你想要渐变填充、描边或圆角尖端，CSS 边框都无法实现。

常见问题

仅靠边框是做不到的，边框宽度无法以任何被良好支持的方式接受 % 或 vw。若需要平滑缩放，请改用 SVG 的 <polygon>，或在普通元素上使用 clip-path: polygon(...)。

无法对边框交汇的那个角进行圆角处理。请使用带描边路径的 SVG 并配合 stroke-linejoin: round，或用 clip-path: polygon(...) 结合轻微的 filter: drop-shadow 来遮盖边缘。

可以，这正是最常见的用法。将三角形以绝对定位贴在工具提示的边缘，并让填充颜色与工具提示的背景色一致，使其看起来像一个完整的气泡。

是的。您选择的方向、大小和颜色会随页面请求发送到我们的服务器，以便生成 CSS。在分步流程中，这些值也会携带在页面链接中。它们不会被存储。

相关工具

ASCII 表参考

完整 ASCII 表，覆盖 0 到 127；列出每个代码的十进制、十六进制、八进制、二进制值和 HTML 数字字符引用写法，包括 NUL、LF、DEL。

HTML 字符参考

可搜索的 HTML 实体列表，含命名代码与数值代码，并支持一键复制特殊字符和符号。

键盘快捷键参考

搜索 macOS、Windows 和 Linux 上 VS Code、Chrome 以及使用 GNU Readline 的 Bash 的文档默认快捷键。

电话号码验证器

根据各国号码规划检查结构，并显示地区、类型以及E.164、国际、国内和RFC 3966格式。

变更日志生成器

根据分类条目生成 Keep a Changelog 风格的 Markdown 部分。将条目粘贴到 Added、Changed、Fixed 和 Removed 下，选择 Markdown 或纯文本，然后复制输出。

cURL 命令生成器

根据 HTTP URL、请求头、认证、JSON、原始数据或表单字段，在浏览器中私密生成适用于 POSIX Shell 或 PowerShell 的 cURL 命令。

此工具还提供其他语言版本