CSS 三角形生成器
生成纯 CSS 三角形。
How to Use
- 选择三角形方向——上、下、左或右。
- 设置三角形的尺寸和颜色。
- 复制生成的 CSS 代码（使用 border trick 实现三角形效果）。
Frequently Asked Questions
- CSS 三角形的实现原理是什么？
- CSS 三角形利用边框的渲染特性：当元素宽高均为零时，各边框从对应角沿对角线向中心汇聚。将三条边框设为透明，给第四条上色，仅显示的有色边框就形成了三角形。这一技术自 CSS2 起就已存在，在所有浏览器中均可使用。
- 可以给三角形加描边吗？
- 纯 CSS 边框技法的三角形无法直接添加描边，因为三角形本身由边框构成。要加描边，可以使用伪元素 ::before 和 ::after 叠加两个三角形——较大的一个作为描边，较小的一个作为填充。生成器提供此叠加代码作为选项。
- CSS 三角形比 SVG 或 Unicode 箭头更好吗？
- 各有适用场景。CSS 三角形无需 HTTP 请求，可用 CSS 过渡动画改变颜色和尺寸。SVG 三角形形状更灵活，描边控制更好。Unicode 箭头最简单但样式受限。需要纯 CSS 控制的轻量装饰元素和 tooltip 时，CSS 三角形是首选。