纯css三角形最可靠方式是border法：宽高为0，三边transparent，单边有色；因content box消失，四边框在顶点交汇成三角形，方向由有色边决定，尺寸由border-width控制。
纯 CSS 三角形最可靠、兼容性最好、也最容易出错的实现方式，就是靠 border + 盒模型原理 —— 宽高为 0 的元素，其四个边框在交点处自然形成四个等腰直角三角形；只要把其中三边设为 transparent，留一边有颜色，就能“漏出”一个方向明确的三角形。
为什么 width:0;height:0 是必须的
浏览器渲染边框时，会以盒模型的 content box 为原点向外绘制。当 width 和 height 都为 0，content 区域彻底消失，四条边框就只能在同一个点（左上角）交汇 —— 这个交汇点正是所有三角形的顶点。若宽高不为零，边框会从内容区域边缘开始绘制，交点偏移，三角形会变形甚至错位。
常见错误现象：
- 三角形底部出现多余空白或错位 —— 很可能是父容器有默认
line-height或font-size，导致行内盒子基线对齐异常 - 三角形尺寸不对 —— 实际高度/底边长由边框宽度决定，不是你写的像素值直接对应三角形高，比如
border-top: 20px solid red生成的是一个高 20px、底边约 40px 的等腰三角形
border-width 与三角形朝向、形状的关系
方向由「哪条边有颜色」决定，大小和比例由「各边 border-width 值是否相等」控制。例如：
- 向下箭头：保留
border-bottom有色，其余三边transparent - 向右箭头：保留
border-right有色，border-top/border-bottom宽度相等且透明，border-left设为0或透明 - 直角三角形：把某一边的
border-width设为0，比如border-top: 0+border-right: 30px solid blue+border-bottom: 30px solid transparent→ 向右的直角三角形
注意：border-width 支持分别设置四值（上右下左），但必须用 border-color 或单边 color 属性配合，否则透明色会失效。推荐写法是统一设 border-style: solid + border-width: A B C D + 单独覆盖如 border-left-color: blue。
容易被忽略的兼容性与渲染细节
低版本 IE（IE8 及以下）对 transparent 支持不稳定，建议用 rgba(0,0,0,0) 替代；现代浏览器中，transparent 是安全的。
另一个关键点：三角形本身无法加 box-shadow（边框投影不生效），也不能用 transform: scale() 精确缩放而不影响布局流 —— 因为它本质是边框，不是图形路径。如果需要阴影或旋转，得套一层父容器做包裹变换。
最后提醒：别在三角形元素里放文字或子节点 —— width:0;height:0 下内容会被裁剪或撑开布局，破坏三角形形态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
