方向
top / 20px
输出
border-bottom-color: #...
设计配色
CSS Triangle 生成 - 纯 CSS 三角形
在线 css triangle 生成器：按方向、尺寸与颜色输出 border 三角形 CSS 并实时预览，适合气泡箭头与角标装饰，代码可直接复制使用。
CSS三角形形状
设计配色
CSS 三角形生成
在线 css triangle 生成器：按方向、尺寸与颜色输出 border 三角形 CSS 并实时预览，适合气泡箭头与角标装饰，代码可直接复制使用。
最终边框魔术 (CSS)
使用场景
- 制作提示气泡箭头
- 生成角标装饰
- 快速调试 border 三角形
如何使用
- 选择方向
- 设置宽高和颜色
- 预览后复制 CSS
示例输入输出
FAQ
原理是什么？
常见实现将元素宽高设为 0，再配合各边 border 颜色与透明边组合成三角形。
能做直角或不规则三角吗？
当前按方向与宽高生成常规 tip 三角形；更复杂多边形可用裁剪路径工具。
工具列表
相关推荐
你可以从这里继续打开相近场景的工具，减少重复搜索。