透明三角本质是利用CSS边框交汇处自动形成45度斜角的特性，将三边设为transparent、仅留一边有色，且元素宽高必须为0才能“挤”出纯三角；方向由着色边决定（如border-bottom为上三角），大小由该边宽度控制。
border透明三角的原理是什么
本质是利用CSS边框在交汇处自动形成45度斜角的特性，把不需要的三边设为transparent，只留一边有颜色，视觉上就挤出一个实色三角。不是“画”出来的，是“挤”出来的——所以必须保证元素宽高为0，否则会看到矩形底板。
常见错误现象：div明明写了width: 0; height: 0;，但三角还是歪的或看不见——大概率是父容器有overflow: hidden裁掉了边框，或者元素被其他样式（比如line-height、font-size）撑开。
怎么控制三角方向和大小
方向由哪条边设颜色决定：上三角用border-bottom，下三角用border-top，左三角用border-right，右三角用border-left；大小由对应边框的宽度值控制，比如border-bottom: 10px solid #333;就生成一个高约10px的向下箭头。
关键参数差异：
立即学习“前端免费学习笔记（深入）”；
- 想让三角更尖锐？减小另外三边的
border-width，但不能为0（否则交汇点消失，三角塌掉） - 需要等腰直角三角？四边
border-width必须相等 - 要带边框的三角？不行——
border本身已是绘制手段，无法再套一层边框，得用伪元素叠加
实际用在按钮下拉箭头时要注意什么
场景很典型：右侧紧贴文字的向下小箭头。最容易踩的坑是定位偏移和响应式断裂。
实操建议：
- 用
::after伪元素生成三角，避免污染语义结构 - 设置
position: absolute后，用top: 50%; transform: translateY(-50%);垂直居中，别依赖margin硬调 - 移动端缩放时三角可能糊掉？把
border-width写成px单位，别用em或rem——它们会随字体缩放，导致三角比例失真 - 如果父容器用了
flex布局，确保伪元素没被flex-shrink压缩变形
为什么有时三角边缘发虚或有白边
这是亚像素渲染惹的祸。当三角边框宽度不是整数（比如border-bottom: 9.5px solid #000;），浏览器在非Retina屏上会做插值，导致边缘半透明。
性能与兼容性影响：
- 所有现代浏览器都支持，IE8+也没问题，但IE8不支持
rgba()作边框色，若需透明底色得换思路 - 别用
filter: blur()修边缘——它会让整个元素重绘，滚动卡顿 - 真正靠谱的解法：确保
border-width是整数，且容器transform: translateZ(0)触发硬件加速（仅对部分Chrome有效）
复杂点在于：三角不是独立图形，它依附于盒模型边界。一旦父级有transform、perspective或will-change，边框交汇角度可能微变，箭头就偏了——这种时候，老老实实用SVG反而更稳。
