用border实现扁三角形的原理是利用相邻边交界处的斜切效果，三边透明、一边实色，配合width:0;height:0;形成三角；关键在于控制border-width比例（如2:1）和transform微调形状。
用 border 实现扁三角形的原理
浏览器渲染 border 时，相邻两边的交界处会自然斜切，把其中三边设为透明、留一边有颜色，就能“挤”出三角形。扁三角形的关键是让高度远小于宽度——比如 border-bottom 高 10px，左右 border-left 和 border-right 各宽 50px，视觉上就是横向拉长的扁三角。
常见错误是只调 border-width 却忘了清空 width 和 height：如果元素本身有宽高，border 会叠加在盒模型外，三角形位置偏移或被遮挡。
- 必须设
width: 0; height: 0; - 三边设
transparent，留一边设实色（如border-bottom: 10px solid #333;） - 若要尖角朝左/右，用
border-left或border-right配合上下透明边
水平向右的扁三角形写法
这是最常搜的场景：下拉菜单箭头、气泡提示的指向角。目标是底边短、左右边长，形成向右的扁平箭头。
示例代码：
立即学习“前端免费学习笔记（深入）”；
.arrow-right {
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 16px solid #007bff;
}
注意：border-left 的宽度（16px）决定三角形“扁”的程度——越宽越扁；border-top/bottom 的值（8px）共同决定高度。两者比例通常在 2:1 左右视觉较稳。
- 不要给
line-height或font-size，否则可能撑开容器 - 若父容器有
overflow: hidden，三角形可能被裁掉 - IE8+ 兼容，但不支持圆角或阴影直接加在 border 三角上
用 transform 缩放微调形状
纯 border 三角的尖角弧度固定，有时需要更“钝”或更“锐”。这时不建议改 border 值反复试，而是用 transform: scaleX() 拉伸或压缩。
比如已有向右三角，想让它更扁：
.arrow-right-flat {
transform: scaleX(1.4);
transform-origin: center left;
}
关键点是 transform-origin：设成 center left 可保证左侧顶点不动，只向右拉伸，避免整体位移。
- 缩放后实际尺寸变化，若依赖精确定位（如绝对定位 offset），需同步调整
left/top - 缩放不影响 border 渲染质量，但过度拉伸（>1.8x）可能在某些缩放比例下出现亚像素模糊
- 不用
scaleY单独压高度——它会让 border 边缘变虚，视觉毛刺
伪元素里画三角比单独 div 更稳妥
直接用 <div class="triangle"></div> 容易破坏语义、增加无意义 DOM 节点。99% 场景该用 ::before 或 ::after。
例如按钮右侧小三角：
button::after {
content: "";
display: inline-block;
width: 0;
height: 0;
margin-left: 6px;
vertical-align: middle;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 8px solid currentColor;
}
这里用 currentColor 继承文字色，比写死颜色灵活；vertical-align: middle 对齐文本基线，避免上下跳动。
- 务必写
content: ""，否则伪元素不渲染 - 避免在
display: flex容器里用margin推三角，flex 项 margin 行为在旧版 Safari 有差异 - 如果三角要响应 hover 变色，直接改伪元素的
border-color，别用 JS 切类名
真正难的不是画出来，而是三角的定位锚点是否稳定——它依赖父容器的 position 类型、字体度量、甚至行高继承链。上线前最好在 iOS Safari 和 Chrome 移动版连按几次缩放再看对齐。
