能做三角形，需满足宽高为0、三边transparent、仅一边solid；方向由设色边决定，大小由该边border-width决定；常见失效因overflow:hidden、inline元素未设display、transform缩放干扰；调试用outline可见真实边界。
能做，但必须满足三个硬条件：元素宽高为0、三边transparent、仅留一边设solid颜色；方向和大小全由哪条边设色、以及该边的border-width值决定。
为什么三角形总看不见或歪斜
不是border写错了，而是上下文在“吃掉”边框渲染区域：
- 父容器有
overflow: hidden——边框外溢部分被裁剪，三角直接消失 - 元素是
inline且没设display: block或inline-block——受line-height或font-size撑开，width: 0; height: 0;失效 - 祖先元素用了
transform: scale()——部分浏览器会重算border-width，导致位置漂移 - 调试时加一句
outline: 1px dashed red，立刻看清真实边界，比靠猜快十倍
如何精准控制方向与大小
方向不是“朝哪画”，而是“哪边留色”；大小不是“三角高”，而是“那条边的border-width值”：
- 向下箭头 →
border-top: 8px solid #333，其余三边transparent - 向上箭头 →
border-bottom: 8px solid #333，其余三边transparent - 向右箭头 →
border-left: 8px solid #333，其余三边transparent - 向左箭头 →
border-right: 8px solid #333，其余三边transparent -
border-width必须用整数px（如8px），禁用7.5px或em/rem——亚像素或缩放会致边缘发虚、比例失真
伪元素实现零DOM开销的下拉箭头
实际项目中，用::after最干净，不增加语义节点：
- 目标元素设
position: relative，伪元素用position: absolute定位 - 垂直居中别用
margin-top，改用top: 50%; transform: translateY(-50%) - 两个关键声明不能少：
width: 0; height: 0;，否则伪元素可能占文档流高度 - 如果父容器是
flex，检查是否被flex-shrink意外压缩 - 带描边效果？得用
::before和::after双伪元素叠加，单个border无法再套边框
真正难的不是写出一个三角，而是在复杂布局里稳住它的位置和比例——它不占文档流，却对父级的overflow、transform、will-change异常敏感。稍有不慎，交汇角度就偏了，箭头就歪了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
