◺
CSS 三角形生成
用 border 生成纯 CSS 三角形,方向、大小、颜色可调,一键复制代码。做气泡箭头常用。本地生成。
本地处理 · 不上传
加载工具中…
相关：CSS三角形 · 纯CSS三角 · border三角形 · 箭头生成
CSS 三角形生成器用边框技巧生成任意方向与尺寸的纯 CSS 三角形，实时预览并输出代码。做气泡尖角与下拉箭头的经典方案。
使用步骤
- 选择三角形方向
- 调整尺寸与颜色
- 查看预览
- 复制生成的 CSS
使用场景
- 为提示气泡添加指向尖角
- 制作下拉菜单的箭头指示
- 做面包屑导航的箭头分隔
- 实现纯 CSS 的图形装饰
小贴士
- 原理是把元素宽高设为 0，只留边框——相邻边框的交界处是斜线，把其余三边设为透明就只剩一个三角形。
- 改变各边边框的宽度比例可以做出不等腰三角形，方向由哪一条边保留颜色决定。
- 现在也可以用 clip-path 做三角形，代码更直观，但边框方案兼容性更好且不影响子元素。
常见问题
为什么设了宽高就不是三角形了？
边框三角形依赖元素内容区为零。一旦有宽高，中间会出现矩形内容区，四条边框变成梯形，三角形就没了。
能做圆角三角形吗？
边框方案做不出真正的圆角三角形。需要圆角应改用 SVG 的 path 或 clip-path 配合 border-radius，二者都能更好控制。
clip-path 和边框方案怎么选？
需要兼容老浏览器或三角形内部要放内容时用边框方案；追求代码可读性、要做异形裁剪时用 clip-path 更合适。
CSS 三角形生成是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用CSS 三角形生成，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。