必须写content: ""，因为伪元素默认不渲染，content是唯一触发显示的开关；省略或设为none则::after完全不可见，即使仅用作纯色块或三角形也需此声明。
::after 本身不画图，它只提供一个可样式化的“空盒子”；真正画箭头和几何图形的是 border、transform 和 clip-path 的组合。
为什么必须写 content: ""？
伪元素默认不渲染，content 是唯一触发显示的开关。即使你只想用它当纯色块或三角形，也得写 content: ""——写成 content: none 或直接省略，::after 就完全不可见。
常见错误：
- 忘了加 content，结果什么也不出现
- 写了 content: " "（带空格），可能引发意外换行或间距
- 在 Flex/Grid 容器里误设 display: block，导致布局错乱（其实默认 inline 就够用）
border 方案画三角形：方向与尺寸控制逻辑
纯 border 三角依赖边框交汇时的斜角渲染，本质是“挤”出来的视觉形状。关键不是“画”，而是“藏”。
- 只保留一条边框有颜色，其余三边必须为
transparent（不能是none，否则边框宽度失效） -
border-width直接决定三角大小：比如border-top: 8px solid #000配合border-left/right: 8px solid transparent→ 等腰直角三角，高宽都是 8px - 方向口诀：有颜色的那条边，就是三角尖端所指的方向：
→ 向下箭头：border-top: 8px solid #000; border-left/right: 8px solid transparent;
→ 向右箭头：border-left: 8px solid #000; border-top/bottom: 8px solid transparent; - 居中定位必须配合父容器
position: relative，否则top/left会相对于 body 偏移
超出 border 能力的图形：什么时候该切到 clip-path
border 只能生成最多四边、无内角的凸多边形（三角、梯形、矩形）。一旦要画五边形、菱形、带缺口的环、星形，就得换方案。
立即学习“前端免费学习笔记（深入）”；
推荐路径：
- 先用 ::after 创建一个正方形或圆形容器（width/height + background）
- 再用 clip-path: polygon(...) 切出目标形状，例如菱形：clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)
- 注意：iOS Safari 对 clip-path 的 polygon() 支持从 iOS 15.4 才稳定，旧版本需降级为 SVG 或多伪元素叠加
容易踩的坑：
- clip-path 坐标单位是百分比，不是像素，别硬套 px 值
- 动态缩放时，clip-path 不会自动适配，需配合 aspect-ratio 或 JS 计算
- 不要用 clip-path 做复杂动画，性能比 transform 差不少
箭头旋转动画比重绘 border 更可靠
下拉菜单常需要“点击后箭头翻转”。别用切换 border-bottom 和 border-top 的方式——高 DPI 屏幕或缩放时容易出现 1px 锯齿或错位。
正确做法：
- 统一用向下箭头（border-top）作为基础态
- 用 transform: rotate(180deg) 实现翻转
- 动画必须加在 ::after 上：.menu-open::after { transform: rotate(180deg); }，而不是父元素
额外注意：
- 如果父容器用了 will-change: transform，某些 Chrome 版本会让 ::after 闪烁，建议只对伪元素单独加
- 移动端点击区域小，箭头本身没交互能力，记得把 pointer-events: none 加给 ::after，避免遮挡下方点击
真正难的不是怎么画，而是判断该用 border、clip-path 还是叠加多个 ::before/::after——边界往往在“是否需要响应式缩放”和“是否要兼容 iOS 14 以下”。
