倒三角形利用css border斜角渲染特性实现：元素宽高为0时，设border-left、border-right透明且相等，border-top为实色并配合border-style:solid，即可形成等腰直角倒三角。
用 border 实现倒三角形的原理
倒三角形本质是利用 CSS border 的斜角渲染特性：当元素宽高为 0，只设置四个方向的边框，且其中三个设为透明（或同色），剩下一个设为实色时，相邻透明边框会“挤出”一个等腰直角三角形；若想得到倒三角，就让 border-top 为实色，border-left 和 border-right 为透明。
关键点在于：必须同时设置 border-style: solid，且不能依赖 outline 或 box-shadow —— 它们无法形成真正的三角形轮廓。
最简可行代码（兼容所有现代浏览器）
以下是最小、最稳的倒三角写法，无需伪元素，无额外 DOM：
.arrow-down {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #333;
}
说明：
-
border-left和border-right值相等 → 控制底边宽度（16px） -
border-top值决定高度（8px）→ 高度 = 底边 / 2，符合等腰直角三角形比例 - 颜色可任意替换，如
border-top: 6px solid #007bff适配小图标尺寸 - IE8+ 完全支持，无需前缀
用伪元素 ::after 插入更灵活
实际项目中，箭头通常作为按钮或下拉控件的装饰，直接加在元素上易破坏布局。推荐用伪元素注入：
.dropdown-btn::after {
content: "";
display: inline-block;
width: 0;
height: 0;
margin-left: 4px;
vertical-align: middle;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid currentColor;
}
注意点：
- 必须声明
content: ""，否则伪元素不渲染 - 用
vertical-align: middle对齐文字基线，避免跳动 -
currentColor继承父元素文字色，比写死颜色更健壮 - 若父容器有
line-height，需确保伪元素高度与之协调，否则可能错位
常见翻车现场和绕过方式
看似简单，但几个细节极易导致箭头不显示或变形：
- 忘了设
display: block或inline-block→ 元素塌陷，边框不占空间 - 设置了
overflow: hidden在父容器上 → 三角形被裁掉（border 渲染在盒模型外） - 用
em或rem写 border 值 → 在 font-size 变化时比例失真，建议统一用px - 在 Flex 容器里没设
align-self: center→ 箭头垂直对不齐 - 需要响应式缩放？别用 media query 改 border 值，改用
transform: scale(0.8)更稳妥
真正难的不是画出来，而是让它在各种上下文里都稳稳待在该在的位置——尤其是嵌套在 button、input 或第三方组件里时，vertical-align 和 line-height 的隐式影响最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
