工具功能
CSS三角形生成器是一款在线免费工具，使用CSS border透明原理生成纯CSS三角形，可以生成上下左右正方向以及四个斜向方向的三角形，支持自定义大小和颜色，可用于制作气泡框小箭头、图形装饰等场景，生成后可直接复制CSS代码使用。
使用方法
- 在下拉菜单中选择三角形的方向，支持向上、向下、向左、向右、左上、右上、左下、右下八种方向。
- 输入三角形的大小（单位：像素px），需要输入大于0的整数。
- 点击颜色选择器选择三角形的颜色，也可以直接输入十六进制颜色代码。
- 勾选「显示透明边框说明」可以在生成的CSS中保留transparent透明说明，方便阅读；取消勾选则会省略transparent。
- 点击「生成CSS」按钮即可生成对应的CSS代码，在预览区域可以看到实际效果，点击「复制CSS」即可复制代码到剪贴板。
实现原理
CSS三角形利用了border的交汇特性：当一个元素的宽高为0，仅靠border撑起来时，四个方向的border会在交汇处形成45度斜角，将不需要方向的border设置为透明（transparent），只保留需要方向的border颜色，就可以得到三角形效果。
以向下的三角形为例，公式原理：
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 三角形高度 半宽度 0 半宽度;
border-color: 三角形颜色 transparent transparent transparent;
}
斜向三角形原理类似，通过控制两个相邻方向的border宽度和颜色，得到斜角三角形。
注意事项
- 生成的代码是标准CSS，可以直接复制到你的项目样式中使用。
- 如果是制作气泡弹窗的小箭头，建议生成大小在10-20px之间，和气泡边框颜色保持一致即可。
- 透明三角形仅需要将颜色设置为和背景色一致即可，适合在浮层气泡框中使用。