border三角形能显示出来本质是利用CSS边框交界处的斜角渲染机制：宽高为0时，四边在中心交汇，仅设色边与透明边交汇形成可见三角；方向由设色边决定，大小由边框宽度及相邻透明边共同挤压成型。
border三角形为什么能显示出来
本质是利用了CSS边框在交界处的斜角渲染机制。当你把一个元素的宽高设为0，再给某一边（比如border-bottom）设颜色，其余三边设透明或无色时，浏览器会把四条边在中心点交汇——而交汇处那块“斜切区域”就被渲染成可见的三角形。
常见错误现象：border: 10px solid red画出来是菱形，不是三角；或者三角方向不对、边缘模糊、在Retina屏上发虚。
- 必须同时设置
width: 0和height: 0，否则边框会撑开容器，三角被“淹没” - 只保留需要的那一侧边框有颜色，其余三侧必须用
transparent（不能用none或0，否则不渲染斜角） - 边框宽度决定三角大小，但三边宽度之和要平衡：比如向下箭头用
border-top: 10px solid #000+border-left: 10px solid transparent+border-right: 10px solid transparent
怎么控制三角形的方向和大小
方向由哪条边设色决定，大小由边框宽度和相邻透明边的宽度共同挤压成型。不是“画”出来的，是“挤”出来的。
使用场景：下拉菜单箭头、气泡对话框指向、步骤流程图指示器。
立即学习“前端免费学习笔记（深入）”；
- 向上箭头：
border-bottom: 10px solid #333+border-left/right: 10px solid transparent - 向右箭头：
border-left: 10px solid #333+border-top/bottom: 10px solid transparent - 想变大？同步加大所有相关边框值；想更尖？保持底边不变，减小左右/上下透明边的宽度（但别小于1px，否则渲染异常）
border三角在高DPI屏幕或缩放时发虚怎么办
根本原因是边框宽度非整像素渲染导致亚像素模糊，尤其在transform: scale()或浏览器缩放后明显。
性能影响很小，但视觉体验差——它不是矢量图形，没有抗锯齿优化。
- 避免用小尺寸（如
4px）做三角，优先用6px、8px等偶数，减少亚像素计算 - 加
transform: translateZ(0)或will-change: transform可强制GPU渲染，缓解部分模糊 - 真正要兼顾清晰度和缩放，就别硬扛border方案——改用
clip-path或SVG，虽然多写几行，但可控性翻倍
兼容性与现代替代方案的取舍点
border三角在IE8+都支持，但IE8不支持transparent关键字（得用rgba(0,0,0,0)），而clip-path在IE里完全不可用。
参数差异很实在：border方案零JS、零额外DOM；clip-path需要精确坐标计算；SVG要内联或引用资源。
- 如果项目还要兼容IE9以下，border仍是唯一选择，但务必测试
transparentfallback - 如果只支持Chrome/Firefox/Edge最新两版，优先用
clip-path: polygon(0 0, 100% 0, 50% 100%)，方向和大小更直观 - SVG适合需要旋转、动画或动态变色的场景，但注意
viewBox缩放和父容器font-size可能意外影响尺寸
px和em，结果三角歪了还查半天。还有人给三角加border-radius，忘了它根本不生效。 
