透明边框能画三角形是因为浏览器将相邻透明边框与单侧实色边框在width/height为0时的交界处渲染成斜边，形成等腰直角三角形；关键需设宽高为0，且仅一条边有色、其余三边等宽透明。
border透明边框为什么能画出三角形
因为CSS的边框在角落处是斜接的，当只设置一个方向的边框有颜色、其余三个方向设为透明时，那个有色边框就会被“挤压”成一个等腰直角三角形。本质是浏览器把相邻两个透明边框和一个实色边框的交界区域渲染成了斜边。
关键前提：width 和 height 必须都设为 0，否则会看到矩形块而非纯三角形。
最简三角形箭头写法（向下）
这是最常复用的基础模板，适用于提示气泡、下拉菜单等场景：
.arrow-down {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #333;
}
说明：
-
border-top是三角形底边朝上的那条边——它决定了箭头朝向和颜色 -
border-left和border-right宽度必须相等，且为transparent，它们共同构成三角形左右两腰 - 三角形高度 =
border-top的宽度，底边宽度 ≈border-left + border-right
不同方向箭头的border组合规律
方向由“哪一条边是有色的”决定，其余三条必须全透明且宽度匹配：
- 向上：
border-bottom有色，border-left/border-right透明 - 向左：
border-right有色，border-top/border-bottom透明 - 向右：
border-left有色，border-top/border-bottom透明
注意：border 的四个方向不能混用实色——比如同时设 border-top 和 border-right 为非透明，会得到一个缺角矩形，不是三角形。
实际使用中容易翻车的点
这些细节不处理，箭头可能错位、模糊或消失：
- 父容器设置了
overflow: hidden，而三角形靠绝对定位偏移出边界——会被裁掉，需检查top/left值和父容器溢出策略 - 在高DPI屏幕（如Mac Retina）上，1px边框可能显示为半像素，导致边缘发虚；建议用
border-width: 2px配合transform: scale(0.5)模拟1px，或直接接受2px清晰渲染 - IE8及以下不支持
transparent值，必须写成border-color: rgba(0,0,0,0)或退化为图片方案 - 如果三角形需要阴影，
box-shadow对零宽高元素无效，得用伪元素或额外包裹层
三角形本身没有内容流，也不占文档空间，所以位置控制完全依赖 position 和偏移量——这点比想象中更脆，稍一改动布局就容易脱节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
