CSS Triangle Generator

Settings

Direction

Size (px)

Color

Preview

CSS Code

.triangle {
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 40px solid #333333;
}

技术详情

CSS 三角形生成器的工作原理

工具功能

CSS 三角形生成器利用 CSS 边框技巧（Border Trick）创建纯 CSS 的三角形图形，无需 SVG 或 Canvas。工具通过可视化界面让你调整三角形的方向（上、下、左、右、四角）、尺寸（宽度和高度）、颜色和边框样式，实时预览效果并生成对应的 CSS 代码。生成的三角形实质上是将元素宽高设为零，然后通过设置不同方向的 border 宽度和透明色来创建三角形。

常见开发者使用场景

CSS 三角形是前端开发中的经典技巧。在 Tooltip 提示框或 Dropdown 下拉菜单中，指向触发元素的小箭头使用三角形。导航菜单中当前选中项下方的指示器常常用三角形实现。进度条或评分组件的指针标记、手风琴折叠面板的展开/收起指示图标、对话框气泡的尾部装饰——这些都是三角形的常见应用场景。面试中也经常被问到"CSS 如何画三角形"这个问题。

生成的 CSS 代码可以使用 CSS 格式化器统一格式，或与 SVG 占位符生成器生成的 SVG 图形结合使用。

CSS Border Trick 原理

CSS 三角形的绘制利用了浏览器渲染边框时的斜面连接规则：

核心原理：当一个元素的 width 和 height 都为 0 时，border 形成的四个三角形会在中心点汇合
单个三角形：给三个方向的 border 设为 transparent，保留一个方向的 border-color，即可得到指向该方向的三角形
边界尺寸控制：border-width 决定三角形的大小——border-top-width 控制高度，border-left-width 和 border-right-width 控制底边宽度
局限性：纯 CSS 三角形不支持渐变填充（除非结合 clip-path）、无法添加 border-radius 圆角、不支持 box-shadow 投影在斜边上

常见陷阱与注意事项

点击区域：CSS 三角形的实际点击区域是矩形的（包含透明部分），可能意外捕获相邻元素的点击事件。可以嵌套一个子元素来优化点击区域。
边框样式：如果使用 dashed 或 dotted 边框样式，三角形的斜边会显示虚线或点线，视觉上不规则。
响应式限制：三角形的 border-width 是绝对值，无法使用百分比表示。响应式布局需要借助 CSS 变量或 JS 动态计算。
现代替代：对于需要渐变、圆角或复杂形状的场景，推荐使用 clip-path 或 SVG，它们比 border trick 更灵活。

何时使用此工具而非代码

在快速生成 Tooltip 箭头、导航指示器或对话气泡等装饰性三角形时使用此工具。对于需要动态计算或响应式三角形的场景，可以使用 CSS clip-path 或直接使用 SVG inline 元素，它们提供更精确的形状控制。