用border画三角形箭头最可靠方式是：元素宽高为0、三边transparent、单边设色；方向由设色边决定（如border-top向下），大小由该边border-width控制。
用 border 技巧画三角形箭头
纯 CSS 箭头最常用、最可靠的方式就是利用元素的 border 边框特性——把一个块级元素的宽高设为 0，再给其中一侧边框设颜色、其余三侧设透明，就能“挤出”一个三角形。
关键点在于：浏览器渲染 border 时，相邻两边会在角上自然斜接，形成等腰直角三角形；只要控制好 border-width 和透明/实色组合，就能定向生成箭头。
-
width: 0; height: 0;是前提，否则 border 会附着在内容盒上，无法独立成形 - 要朝右的箭头 → 给
border-top和border-bottom设同宽透明，border-left设实色（如solid #333） - 要朝下的箭头 →
border-top实色，border-left/right/bottom透明且等宽 - 边框宽度直接决定箭头大小，比如
border-width: 8px 0 8px 12px;可微调左右不对称感（用于更锐利的箭头）
用伪元素 ::before / ::after 封装箭头更干净
直接在业务元素上写 border 容易污染结构样式，推荐用 ::after 伪元素单独承载箭头，主体元素保持语义清晰。
注意伪元素默认是 inline，必须显式设 content: ""; + display: block; 或 inline-block 才能生效。
- 示例（下拉箭头）：
.dropdown::after { content: ""; display: inline-block; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #666; margin-left: 4px; } - 避免用
position: absolute除非需要精确定位——它会让父容器失去高度撑开能力，可能引发布局塌陷 - 如果父元素有
line-height，伪元素的 vertical-align 默认是 baseline，容易错位，建议加vertical-align: middle;
用 transform 旋转正方形实现更可控的箭头
当需要带边框、阴影或抗锯齿更平滑的箭头时，border 法会受限（比如无法给三角形加 box-shadow）。这时可用一个正方形 div，用 transform: rotate(45deg) 倾斜成菱形，再裁剪或遮罩出箭头形状。
- 基础做法：
width: 8px; height: 8px; background: #333; transform: rotate(45deg); - 配合
overflow: hidden和父容器 padding/margin，可模拟「带尖角的矩形箭头」，比纯 border 更易对齐像素 - 注意：rotate 后坐标系变化，若后续需绝对定位，left/top 值要重新估算；Safari 旧版本对
transform的 subpixel 渲染不一致，箭头边缘偶尔发虚 - 不推荐用此法做响应式箭头——
vw单位在 rotate 下缩放行为难预测，border 方案的em或rem更稳
IE8 及更老浏览器的兼容处理
IE8 不支持 ::before/::after 伪元素（只认 :before/:after），也不支持 transform。若项目仍需兼容，border 法是唯一选择，但得手动补全 hack。
- 必须用单冒号写法：
.icon:after { ... }（IE8 识别），同时保留双冒号给现代浏览器 - IE8 不支持
transparent关键字，要用rgba(0,0,0,0)或#000000配合filter: chroma(color=#000000);模拟透明边框 - 实际项目中，更务实的做法是：检测
document.documentMode，对 IE8 降级为小图标的background-image，CSS 箭头只走现代路径
border 法看似简单，但 width/height 为 0 时的盒模型行为、伪元素的 content 必填规则、以及不同方向箭头对应的 border 组合，稍不注意就会漏掉一两个透明边导致箭头变方块。动手前先在 CodePen 里试一组上下左右四向箭头，比查文档更快定位问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
