生成用于 tooltip、指针和 UI 箭头的方向性 CSS 三角形。
使用基于边框的形状技术为工具提示、指针、徽章和导航提示生成定向 CSS 三角形。
它使用透明边框和定向颜色边框输出三角形 CSS。
它支持带有宽度和高度控制的“上”、“下”、“左”和“右”方向。
它提供实时预览,因此可以快速确认箭头方向和比例。
它导出下拉菜单、标注和指针 UI 组件的可重用片段。
方向
right
几何参数
底宽70px,高40px
颜色
#38bdf8
直角三角形 CSS
border-top: 35px solid transparent; border-bottom: 35px solid transparent; border-left: 40px solid #38bdf8;
上三角形 CSS
border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 34px solid #22d3ee;
集成说明
使用伪元素将三角形附加到现有的 UI 块。
三角形出现扭曲
平衡预期比例的基本宽度和高度值。
方向指向错误的方向
复制片段之前验证所选方向。
颜色边缘显示抗锯齿伪影
尝试均匀像素值并在目标缩放级别进行检查。
工具提示周围的定位已关闭
将生成的形状与显式绝对定位规则相结合。
容器中出现意外的布局变化
生成时将三角形元素宽度/高度保持为零。
CSS 三角形生成器 应作为交付流程中的快速校验步骤,在提交、发布和交接前都建议执行一次。
为什么在三角形 CSS 中要将宽度和高度设为零?
基于边框的三角形依赖于零大小的框加上边框几何图形。
我可以将其用于工具提示箭头吗?
是的,这是生成三角形的常见用例。
如何更改三角形方向?
切换方向并重新生成边框边规则。
我可以对三角形颜色进行动画处理吗?
可以,对对应方向的边框颜色属性做动画即可。
这比使用 SVG 三角形更好吗?
对于简单的指针,边框三角形轻量且快速。