border画三角形的关键是四边共存且非零、宽高为0、三边transparent一边有色；朝向由有色边决定，等腰需相邻透明边宽度相等；IE8兼容需避免transparent和小border-width。
border-width 为 0 时画不出三角形
盒子宽高设为 0 是对的，但关键不是“设为 0”，而是让三边透明、一边有色，且四条 border 必须同时存在、非零。如果某条 border-width 是 0，它就彻底不占空间，交点塌缩，三角形直接消失。
实操建议：
-
width和height必须都设为0，否则内容盒撑开，border 交点偏移 - 四条
border都要声明，哪怕其中三条是transparent；不能只写一条有色边 + 其余省略 - 每条
border-width值决定三角形对应边的长度和角度，比如border-bottom: 40px solid red会生成底边朝下的等腰三角形，高 = 40px，两腰夹角由左右 border 宽度共同决定
怎么控制朝向和等腰形状
三角形朝向完全取决于哪条 border 有色，其余三条用 transparent；等腰与否，看“相邻两条透明边”的宽度是否相等。
常见组合：
立即学习“前端免费学习笔记（深入）”；
- 向下箭头（底边朝下）：
border-left: 20px solid transparent+border-right: 20px solid transparent+border-bottom: 24px solid #333 - 向右箭头（底边朝右）：
border-top: 20px solid transparent+border-bottom: 20px solid transparent+border-right: 24px solid #333 - 若左右
border-width不等（如左 15px、右 25px），三角形就歪了，不再是等腰
IE8 及更老浏览器里 border 三角形会模糊或错位
老 IE 对 transparent 的渲染不一致，有时把透明边当 none 处理，导致交点计算异常；另外 sub-pixel 渲染问题会让细边出现虚化。
能做的妥协：
- 避免用小于
4px的border-width，尤其在需要清晰边缘的图标场景 - 不用
transparent，改用同背景色（如#fff），兼容性更好，但丧失“真透明”语义 - 如果项目必须支持 IE8，优先考虑
clip-path或 SVG，border方案本质是 hack，别强撑
伪元素里用 border 画三角形要注意定位失效
很多人把三角形塞进 ::before 或 ::after，结果三角形飘在文字上方、不贴边——不是 border 写错了，是没清浮动或没设 position。
关键点：
- 父元素得是
position: relative，伪元素才好用position: absolute锚定 - 伪元素默认是 inline-level，
width/height无效，必须加display: block或display: inline-block - 别忘了
content: ""，没有它，伪元素根本不会渲染，border 再对也没用
border 画三角形看着简单，实际卡点全在“四边共存、宽高归零、透明≠无边”这三件事上。最容易被忽略的是：删掉任意一条 border 声明，或者把某条设成 0，三角形就没了——它不是靠“画”出来的，是靠四条边挤出来的。 
