纯CSS三角形首选border技巧：宽高为0时，单边设色、三边transparent，利用边框交汇“漏出”三角形；方向由有色边对边决定，大小由border-width控制；移动端推荐px单位与整数scale缩放，兼容性最佳。
用 border 实现三角形最可靠
移动端适配下，纯 CSS 三角形首选 border 技巧，它兼容所有现代浏览器（包括 iOS Safari 和 Android Chrome），且不依赖 transform 或伪元素，渲染稳定、无锯齿。
原理是利用边框交汇处的斜角：把一个宽高为 0 的元素，只设单边有颜色、其余三边透明，就能得到三角形。关键点在于边框宽度决定大小，颜色决定朝向。
-
width: 0; height: 0;是必须的，否则边框会撑开盒模型 - 要向上指的三角形，就设
border-bottom: 10px solid #333;，左右边框设成border-left: 10px solid transparent;和border-right: 10px solid transparent; - 注意单位用
px比rem更稳妥——rem在缩放或动态字体下可能让三角变形，而px在 retina 屏上靠系统自动做 2x 渲染，视觉更稳
需要响应式缩放时用 transform scale
如果设计稿要求三角形随容器等比缩放（比如在 banner 上跟随图片缩放），border 本身无法响应式缩放，得配合 transform: scale()。
但要注意：scale 会放大整个元素（含 margin/padding），容易破坏布局流；且在某些 Android 低版本 WebView 中，scale + fixed 定位组合可能触发渲染 bug。
立即学习“前端免费学习笔记（深入）”；
- 推荐做法：父容器用
position: relative;，三角形用position: absolute;定位，再加transform: scale(0.5); - 避免对
:before/:after伪元素单独 scale，iOS Safari 有时会丢失抗锯齿 - 慎用
scale(0.33)这类非整数倍——小数缩放易导致 subpixel 渲染模糊，优先选0.5、0.25等二进制友好值
用 clip-path 实现圆角/异形三角（慎用）
想给三角形加圆角或斜切边缘？clip-path 能做到，但移动端兼容性是硬伤：iOS 12.2+ 才支持 polygon()，Android 6–8 的 WebView 几乎不支持。
除非项目明确限定最低系统版本（如 iOS 14+），否则不建议在线上环境用 clip-path 替代 border 方案。
- 写法示例：
clip-path: polygon(0% 0%, 100% 0%, 50% 100%);可生成等腰三角形，但需搭配background-color - 不能和
border混用——clip-path 作用于整个盒，border 会被裁掉 - 性能比 border 差：clip-path 触发重绘，尤其在滚动区域里频繁出现时，低端机可能掉帧
伪元素 vs 单独标签：选哪个？
三角形该用 ::before 还是单独 <span class="arrow"></span>？取决于是否需要交互或 JS 控制。
伪元素轻量、语义干净，但没法绑定事件、不能被 JS 读取 offsetWidth，也不支持 aria-label。
- 纯装饰性指示器（如 tab 下划线箭头）→ 用
::before，CSS 写死即可 - 需要点击展开、动画反转、或根据状态切换方向 → 必须用真实 DOM 元素，方便 JS 操作
classList或 style - 若用伪元素，记得设
content: "";，否则不渲染；且父元素需有position: relative;才能精确定位
真正在意细节的人，会发现 iOS 上伪元素三角在快速 toggle 时偶有闪动——这不是 bug，是 WebKit 的合成层调度延迟，加 will-change: transform; 可缓解，但别滥用。
