CSS 三角形生成器

利用经典的透明边框技巧,用纯 CSS 组成一个三角形,带实时预览和可直接复制的代码。

示例:

工作原理

这个技巧的原理是:一个没有宽度和高度、但边框很厚的元素,其边框会在顶点处汇合。将两条边框设为透明,给第三条上色,就能得到一个指向所需方向的三角形——工具提示箭头或装饰性光标无需图片或 SVG。

为什么用这个技巧而不是图片?

纯 CSS 三角形不需要任何网络请求,可以完美缩放,并能通过 CSS 变量即时改变颜色,而位图图片甚至外部 SVG 都做不到这一点。

我可以为三角形的颜色或大小添加动画吗?

可以,由于它们是标准 CSS 属性(border-color、border-width),可以像其他任何 CSS 属性一样使用 transition 或 @keyframes 进行过渡或动画处理。

100% 本地处理:代码完全在您的浏览器中通过 WebAssembly 生成。