能，但必须让元素宽高为0且三边透明仅一边有色——这是边框交汇被“挤”出的三角；width:0和height:0缺一不可，否则残留底板；方向由有色边决定：border-bottom有色则尖朝上，以此类推。
能，但必须让元素宽高为0，且三边设transparent、仅留一边有色——这不是“画”出来的三角，是边框交汇时被“挤”出来的。
为什么width: 0; height: 0;缺一不可
浏览器渲染边框时，会在四条边交汇处自动形成45度斜角。只有当内容区完全消失（即width和height都为0），这四个斜角才能干净交汇成一个纯三角形；否则会残留矩形底板，看起来像“带尾巴的梯形”。
- 常见错误：只设
width: 0但忘了height: 0，或父容器有line-height/font-size把空元素撑开 - 更隐蔽的坑：父级设置了
overflow: hidden，直接裁掉边框延伸部分，三角就不见了 - 调试建议：临时加
outline: 1px solid red确认元素真实尺寸是否真为0
方向怎么控制？看哪条border-*有颜色
方向由“有色边”的位置决定，不是由“透明边”决定——这是初学者最常反着写的点。
- 向上箭头 →
border-bottom设色（三角尖朝上） - 向下箭头 →
border-top设色（三角尖朝下） - 向左箭头 →
border-right设色（三角尖朝左） - 向右箭头 →
border-left设色（三角尖朝右） - 别写错顺序：
border-color: transparent transparent #000 transparent对应上/右/下/左，顺序错就方向错
用::after伪元素生成箭头时定位总偏移？
伪元素默认以content为基线参与行内布局，直接margin-top或top硬调容易失准，尤其在flex或不同字体环境下。
- 正确做法：设
position: absolute+top: 50%+transform: translateY(-50%)垂直居中 - 水平对齐同理：用
left: 100%+transform: translateX(-50%)靠右并居中自身 - 关键约束：父容器必须有
position: relative，否则absolute会相对于body定位 - 移动端注意：
border-width别用em或rem，缩放时三角会变形；坚持用px
边缘发虚、白边、或箭头歪了？先查这些
三角不是独立图形，它依附于盒模型边界。一旦周围环境有细微干扰，视觉就容易出问题。
- 亚像素问题：
border-width写了9.5px这类非整数，非Retina屏上会插值模糊——强制改回整数 - transform干扰：父级用了
transform、perspective或will-change，可能微调边框交汇角度，导致箭头偏斜 - 别用
filter: blur()修边缘，它触发全元素重绘，滚动卡顿 - 真正有效的兜底：给容器加
transform: translateZ(0)（Chrome系可触发硬件加速）
复杂点在于：这个三角没有坐标、没有路径、不占文档流，它只是边框渲染规则的一个副产品。你调的不是“三角”，是整个盒模型的边界状态——所以任何影响边框绘制的样式，都会让它变。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
