必须将 width 和 height 都设为 0 才能画出纯三角形，因为只有内容区缩为一个点时，四条边框才从同一点斜切交汇，形成四个等腰直角三角形；若仅一个为 0，则得到梯形或不规则块。
为什么必须把 width 和 height 都设为 0 才能画出纯三角形
因为边框在盒模型角上是斜切交汇的，只有当内容区缩为一个点（即 width: 0 且 height: 0），四条边框才从同一点向外延伸，自然形成四个等腰直角三角形区域。如果只设其中一个为 0（比如 width: 0; height: 20px），得到的是梯形或带底边的不规则块，不是标准三角形。
常见错误现象：border-bottom: 30px solid #333 却显示成一个矮胖的倒三角加粗底边——大概率是 height 没清零，或者父容器有 line-height / vertical-align 干扰了基线对齐。
- 旧版 Safari 对
transparent渲染不稳定，建议统一用rgba(0,0,0,0) - IE8+ 支持该方案，但要求所有
border-color显式声明，不能省略 - 别用
overflow: hidden去“裁”出三角形——那是视觉遮盖，不是真正生成形状
border 四个方向参数怎么组合出不同朝向的三角形
方向由“有色边框”的对边决定：留 border-bottom → 向上；留 border-right → 向左；留 border-top → 向下；留 border-left → 向右。大小由该边的 border-width 控制，等腰直角三角形的两条直角边长度就等于这个值。
例如要一个向右的等腰直角三角形：
立即学习“前端免费学习笔记（深入）”；
.arrow-right {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #333;
}
- 想调尖锐度？改相邻两个透明边的
border-width：比如border-top: 5px+border-bottom: 15px+border-left: 10px，就能得到非等腰的向右箭头 - 不要只设一个
border就以为够了——其余三个方向必须显式写为transparent或rgba(0,0,0,0)，否则会继承浏览器默认色（通常是黑色）
梯形不是“升级版三角形”，而是宽高非零时的自然形态
梯形本质是三角形的“拉伸底边”：保持 border-bottom 有色、其余三边透明，但把 width 设为非零值（比如 width: 40px），底边就从一个点变成一条线段，上下两条斜边夹住它，形成等腰梯形。
典型对话框小尾巴就是这么来的：
.bubble-tail {
width: 40px;
height: 0;
border-top: 12px solid #fff;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
}
- 若需要直角梯形（比如左下角贴边），保留
border-left和border-bottom有色，border-top和border-right透明，再设width和height为具体值 - 梯形高度由有色边的
border-width决定，宽度由元素自身的width决定——这两个值独立控制，别混淆 - 注意
display：默认inline元素不认width/height，记得加display: block或inline-block
用 ::before/::after 画图形时最常漏掉的三件事
伪元素本身没有内容，但容易被当成“辅助装饰”而忽略渲染前提。很多样式失效，其实卡在这三点：
- 没设
content: ""—— 这是伪元素存在的硬性条件，缺了直接不渲染 - 没重置
position和尺寸 —— 默认是static，width/height不生效；常用position: absolute+top/left定位 - 父容器没设
position: relative—— 否则absolute伪元素会相对于最近定位祖先或视口定位，位置飘忽
比如一个居中向上的小三角作为弹层指示器：
.tooltip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #333;
}
这里 transform: translateX(-50%) 是关键，否则三角形尖端不会精确对准父元素中心——因为边框交汇点在左边缘，不是几何中心。
