在浏览器中即时运行此工具,无需注册且无需服务端处理。
工具信任状态
此工具的输入和输出会在当前浏览器中处理。
- 浏览器本地此工具的输入和输出会在当前浏览器中处理。
- 离线能力应用加载后,核心处理无需网络也可运行。
- 常规输入此工具未标记为敏感输入工具。
- 开发者工具检查使用工具时打开 Network 面板以验证请求。
喜欢这个工具?
安装 byteflow.tools 可更快启动,并离线访问浏览器本地工具。外部请求工具在执行查询操作时仍需要网络。
安装指南工具信任状态
此工具的输入和输出会在当前浏览器中处理。
喜欢这个工具?
安装 byteflow.tools 可更快启动,并离线访问浏览器本地工具。外部请求工具在执行查询操作时仍需要网络。
安装指南生成用于 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 块。
三角形出现扭曲
平衡预期比例的基本宽度和高度值。
方向指向错误的方向
复制片段之前验证所选方向。
颜色边缘显示抗锯齿伪影
尝试均匀像素值并在目标缩放级别进行检查。
工具提示周围的定位已关闭
将生成的形状与显式绝对定位规则相结合。
容器中出现意外的布局变化
生成时将三角形元素宽度/高度保持为零。
如需了解统一的隐私术语、本地处理模式、外部请求标记和 DevTools 验证流程,请查看信任中心。
CSS 三角形生成器 应作为交付流程中的快速校验步骤,在提交、发布和交接前都建议执行一次。
为什么在三角形 CSS 中要将宽度和高度设为零?
基于边框的三角形依赖于零大小的框加上边框几何图形。
我可以将其用于工具提示箭头吗?
是的,这是生成三角形的常见用例。
如何更改三角形方向?
切换方向并重新生成边框边规则。
我可以对三角形颜色进行动画处理吗?
可以,对对应方向的边框颜色属性做动画即可。
这比使用 SVG 三角形更好吗?
对于简单的指针,边框三角形轻量且快速。