CSS 三角形生成器
选择边缘或角落方向，调整底边和高度，然后复制零尺寸边框技巧，制作 UI 标记或装饰图形。
实时预览
向上三角形
该图形由零宽高元素的边框构成，透明边框会隐藏其他边。
使用步骤
如何使用
- 选择上、下、左、右或角落方向。
- 设置底边宽度、高度和颜色，同时查看实时预览。
- 复制 HTML 和 CSS；需要时在自己的样式表中设置响应式边框值。
零尺寸元素如何变成三角形
生成元素的 width 和 height 均为 0。边框在中心相交，有色边框显示为三角形楔块。其他边框使用透明色：它们仍占据空间并确定三角形边缘，但不会显示。
方向、底边和高度
上、下三角形使用相同宽度的左右透明边框构成底边；左、右三角形使用相同宽度的上下透明边框。角落预设使用一个有色边框和一个透明边框，生成直角三角形。控件限制在实用的 8–240px 范围，让本地预览易于查看。
响应式边界
复制的规则使用固定像素边框宽度，不会随父元素自动缩放。响应式布局可将数值设为 CSS 自定义属性，或对周边布局使用媒体查询和 clamp()。将装饰三角形作为交互目标前，请检查附近文字、焦点环、点击区域、缩放和窄屏效果。
常见问题
你可能还想知道
为什么使用透明边框而不是省略它们？
透明边框仍有几何尺寸。相同宽度会形成两个斜边，同时有色边框保持可见并构成三角形。
可以将它用于对话气泡指示箭头吗？
可以。将生成的装饰元素放在气泡旁边，并确保它不会遮挡可读内容或控件焦点指示。
它会生成 SVG 或多边形吗？
不会。它生成普通 HTML 和 CSS 边框。需要更复杂的几何形状、描边或可缩放路径编辑时，请使用 SVG 或 clip-path。