CSS三角形生成器
可视化生成纯 CSS 实现的三角形，支持调节方向、大小和颜色，一键复制代码。
CSS 三角形生成器
CSS 三角形生成器使用指南
📌 简介
CSS 三角形生成器是一款面向前端开发者的可视化代码生成工具。在网页设计中，经常需要用到下拉箭头的三角、对话框的尖角等图形。使用图片不仅增加 HTTP 请求，放大会模糊；使用 SVG 虽然好，但在一些极简场景下稍显繁琐。纯 CSS 利用 border 属性绘制的三角形，不仅体积为 0，而且加载极快。本工具让您通过拖拽滑块，秒出完美的 CSS 代码。
📖 纯 CSS 画三角形的原理
在 CSS 盒模型中，一个设置了宽高的元素加上边框，边框的交接处是斜角。如果我们将元素的宽和高都设为 0，然后给四个边框分别设置不同的颜色，就会出现四个向中心挤压的三角形。此时，如果想得到一个向上的三角形，只需将左、右边框设为透明（transparent），下边框设为颜色，上边框设为透明（或不要），一个纯 CSS 的三角形就诞生了。本工具通过图形化的方式，帮您计算好各个边框的宽度和颜色，免去手动调试的痛苦。
💼 常见应用场景
- 对话框气泡： 在聊天气泡的下方添加一个指向用户的尖角。
- 下拉菜单箭头： 导航栏中指示有下拉选项的小三角图标。
- 面包屑导航： 作为每一步之间的分隔符。
- 步骤条（Stepper）： 制作带箭头指向的流程进度条。
⚙️ 使用步骤
- 在左侧选择三角形指向的方向。
- 拖动滑块调节三角形的尺寸（底边宽或高）。
- 选择您需要的颜色。
- 右侧会实时预览图形，并生成对应的 CSS 代码。
- 点击“复制 CSS 代码”粘贴到您的样式表中即可。
⚠️ 注意事项
- 由于元素宽高设为 0，该元素内部无法再放置任何其他文本内容。
- 透明边框必须写 `transparent`，不能省略，否则形状会变形。
❓ 常见问题 (FAQ)
Q: 可以生成带有边框的空心三角形吗？
A: 纯 CSS 画空心三角形比较复杂，通常需要利用旋转（transform: rotate(45deg)）并遮挡来实现。本工具目前专注于生成最常用、兼容性最好的实心三角形。
Q: 这个代码在所有浏览器都能用吗？
A: 是的，利用 border 绘制三角形的技术是 CSS2 时代就有的，兼容市面上所有浏览器，包括 IE。