CSS 三角形生成器
CSS 三角形生成器用 border 技巧绘制指向上下左右或斜角的三角形：选择方向、调整两边宽度与颜色，即时预览并输出对应的 border 声明，适合气泡尖角、下拉指示与几何装饰而无需引入图片。
永久免费本地计算 · 零上传
🔒 全程在浏览器内计算，输入内容不会离开您的设备。
怎么用
- 选择三角形朝向
- 调整底边与高度尺寸
- 设定三角形颜色
- 复制生成的 border 代码
典型场景
聊天气泡尾部尖角用纯 CSS 三角
下拉菜单箭头指向切换
版面几何装饰拼折角图形
常见问题
为什么用 border 画？
把元素宽高归零再用不同色 border 相交即成三角。
能做等腰直角吗？
调整两侧 border 宽度即可控制形状角度。
能加渐变吗？
border 色可用渐变近似，复杂效果可改用 clip-path。