CSS三角形原理是利用border相邻边交界处的斜接特性，将宽高设为0、三边透明一边有色，“漏”出三角形；常见错误是未归零宽高或误用none；适用下拉箭头等场景，方向由有色border边决定，大小由border-width控制。
用 border 画纯 CSS 三角形的原理
浏览器渲染 border 时，相邻两边的交界处会自然斜接——把宽高设为 0，只留一个方向有颜色、其余设为透明，就能挤出三角形。这不是“画”，而是“漏”出来的形状。
常见错误现象：border 四边都写了值但没设 width 和 height 为 0，结果看到的是个带边框的方块；或者透明色用了 transparent 却误写成 none（none 不是合法的 border 颜色值）。
使用场景：下拉箭头、气泡对话框小尖角、菜单指示标。
参数差异：border-top 出向下指的三角，border-bottom 出向上指的，左右同理；大小由 border 宽度决定，比如 border-width: 10px 就生成底边约 20px 的等腰三角。
立即学习“前端免费学习笔记（深入）”；
单方向三角形的标准写法（含方向对照）
不依赖伪元素、不依赖 SVG，最轻量的实现。关键就是「三边透明，一边有色；盒模型归零」。
.triangle-down {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #333;
}
方向对照（只改 border 属性组合）：
- 向下指：
border-top有色，left/right透明 - 向上指：
border-bottom有色，left/right透明 - 向右指：
border-left有色，top/bottom透明 - 向左指：
border-right有色，top/bottom透明
用 ::before 或 ::after 嵌入内容区的小三角
直接在文字旁加箭头或提示角标时，不能破坏原有布局流。这时必须用伪元素隔离样式，否则会影响父容器尺寸计算。
容易踩的坑：position: absolute 的伪元素没给 content: ""（没这句就啥也不渲染），或者忘了设 position: relative 在父元素上（导致绝对定位脱标错位）。
性能影响：伪元素本身开销极小，但若大量使用且配合动画，可能触发重排；建议仅用于静态装饰。
示例（按钮右侧小三角）：
button {
position: relative;
}
button::after {
content: "";
position: absolute;
top: 50%;
right: 8px;
margin-top: -4px;
width: 0; height: 0;
border-left: 4px solid #666;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
响应式三角形的缩放问题怎么解
固定像素的 border-width 在高清屏或缩放页面下会模糊或失比例。用 em 或 rem 是可行的，但更稳妥的是用 transform: scale() 动态缩放整个伪元素。
兼容性注意：IE9+ 支持 transform，但旧版 Safari 需要 -webkit-transform 前缀；如果项目还保 IE8，只能放弃响应式缩放，改用媒体查询分段设置 border-width。
不要用 vw/vh 直接设 border-width —— 大部分浏览器不支持单位在 border 中用视口单位（会直接失效回退到 0）。
可选方案：
- 用
calc(0.5em)搭配根字号调节（需确保父级 font-size 可控） - JS 监听
resize动态改style.borderTopWidth（仅必要时用） - 真要强响应，改用 inline SVG —— 路径天然矢量，但增加 DOM 节点和维护成本
