纯CSS三角形原理是利用border交界处的斜角渲染：当元素宽高为0且仅单边设色、其余三边透明时，形成等腰直角三角形；需设置border-width和border-color，禁用background与伪元素内容。
用 border 实现纯 CSS 三角形的原理
三角形本质是利用元素的 border 边框交界处的斜角渲染特性——当一个块级元素宽高为 0，且只设置单边有颜色的 border、其余三边透明时，有颜色的那条边就会在交点处形成一个等腰直角三角形。
关键点在于：必须同时设置 border-width 和 border-color，且至少三边为 transparent 或 none；不能依赖 background 或伪元素内容。
常见方向三角形的写法与参数对照
方向由哪条边设色决定，尺寸由对应 border-width 控制。例如向下箭头是底边着色，向右箭头是右边着色：
- 向下三角形：
border-top: 10px solid #333;+border-left: 10px solid transparent;+border-right: 10px solid transparent; - 向右三角形：
border-left: 10px solid #333;+border-top: 10px solid transparent;+border-bottom: 10px solid transparent; - 向上三角形：
border-bottom: 10px solid #333;+border-left: 10px solid transparent;+border-right: 10px solid transparent; - 向左三角形：
border-right: 10px solid #333;+border-top: 10px solid transparent;+border-bottom: 10px solid transparent;
注意：border-width 值越大，三角形越“胖”；若需等边锐角三角形（如 60°），需调整三边宽度比例，但多数 UI 场景用等腰直角已足够。
立即学习“前端免费学习笔记（深入）”；
避免常见布局错位和兼容性问题
三角形元素默认是行内盒子，容易因 vertical-align 或父容器 line-height 错位；IE8+ 支持良好，但 Safari 旧版本对 transparent 渲染偶有偏差。
- 务必给三角形容器设置
display: block;或display: inline-block;，并显式指定vertical-align: middle;对齐文本 - 不要用
margin微调位置，改用transform: translateY()更稳定 - 如果三角形需要响应式缩放，避免固定
px宽度，改用em或rem单位，或配合scale() - 在 Flex 容器中，三角形可能被拉伸，需加
flex-shrink: 0;
用伪元素实现更干净的结构
把三角形塞进 ::after 或 ::before 里，能避免 DOM 膨胀，也方便复用样式：
.dropdown-trigger::after {
content: "";
display: inline-block;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid currentColor;
margin-left: 4px;
vertical-align: middle;
}
这里用了 currentColor 让三角形自动继承文字颜色，比硬编码颜色更灵活；margin-left 控制间距，vertical-align: middle 确保和文字基线对齐——这些细节不加，三角形就容易悬空或下沉。
真正难的不是画出三角形，而是让它在各种字体大小、行高、Flex/Grid 布局下都稳稳贴住该贴的位置。多试两遍 vertical-align 和 transform 的组合，比反复调 margin 更靠谱。
