用 border 画三角形的原理是：当元素宽高为 0，仅设单边实色边框、其余三边等宽透明时，浏览器利用边框交界处的斜角渲染特性形成等腰直角三角形；需配合 content:""、position:absolute 及精确定位。
用 border 画三角形的原理是什么
纯 CSS 三角形本质是利用边框交汇时的斜角渲染特性：当一个元素宽高为 0，只设置单侧 border（比如 border-top），其余三边设为透明且等宽，浏览器会在交点处自动绘制出等腰直角三角形。关键不是“画”，而是“留白+裁剪”——四个边框颜色/透明度不同，视觉上只露出想要的那一块斜边区域。
常见错误是忘记把其他三边设为 transparent，或宽度不一致导致三角形歪斜；还有人误设 border-style: dashed 或 double，这些在 0 尺寸下不会按预期渲染。
-
width和height必须为0 - 非目标方向的
border（如画向上的三角形，就设border-bottom）必须显式写成transparent，不能省略 - 所有四边
border-width建议统一，否则三角形底边不平、顶点偏移
给气泡加三角箭头并精确定位到右下角
对话框本体用 position: relative，三角形用伪元素 ::after 绝对定位。难点不在画三角形，而在让它“贴住气泡边缘又不溢出”。例如右下角箭头，要让三角形顶点对齐气泡右下角内边，同时不被父容器裁切。
典型错误是直接用 right: 0; bottom: 0，结果三角形整个跑到气泡外面去了——因为 border 宽度参与盒模型计算，而 0 宽高元素的定位基准点是其内容区左上角（即 0,0），不是三角形顶点。
立即学习“前端免费学习笔记（深入）”；
- 画向上的三角形（用于气泡底部箭头）：设
border-bottom: 10px solid #333，其余三边border-top/border-left/border-right: 10px solid transparent - 定位时，若气泡右下角需箭头朝右，用
border-left: 10px solid #333，再配合top: 50%; transform: translateY(-50%)垂直居中 - 为避免父容器
overflow: hidden裁掉箭头，可在气泡上加padding留出空间，或把伪元素的z-index设得比气泡高，并确保父级没有clip-path或transform触发新层叠上下文
absolute 定位三角形时常见的层叠与尺寸错位
伪元素默认和气泡文本同层叠上下文，但一旦气泡自身有 transform、filter 或 will-change，就会创建新层叠上下文，导致三角形被压在气泡下方——即使写了 z-index: 2 也无效。
另一个高频问题是三角形尺寸随缩放失真：用 vw 或 % 设 border-width 会受祖先字体大小或视口影响，而 px 在高清屏下显得细。更稳的方式是用 em（基于气泡 font-size）或配合 @media 查询做断点适配。
- 检查气泡是否意外触发了新层叠上下文：用浏览器开发者工具看“Layers”面板，或临时删掉
transform验证 - 三角形大小建议用
em，例如border-width: 0.6em，这样随气泡字号缩放更自然 - 如果气泡用了
box-sizing: border-box，注意伪元素的border不影响尺寸，但定位偏移值（如right: -10px）仍需手动补偿
响应式下三角形位置偏移或消失的排查点
最常被忽略的是：媒体查询里只改了气泡宽高，却没同步调整伪元素的 top/right 值或 border-width。尤其在移动端，气泡变窄后，原本设 right: 10px 的三角形可能直接挤出可视区。
另外，某些安卓 WebView 对 border-color: transparent 渲染不稳定，极少数机型会显示为黑色或半透明灰，此时可改用 rgba(0,0,0,0) 替代 transparent。
- 所有涉及三角形定位的数值（
top、right、border-width）最好统一用 CSS 变量定义，便于媒体查询中批量覆盖 - 用
@supports (border-color: transparent)做降级兜底，老版本 Android 可 fallback 到 SVG 内联或背景图 - 测试时别只看 Chrome，重点查微信内置浏览器、QQ 浏览器 X5 内核，它们对
absolute+border三角形的渲染边界处理更苛刻
transform 场景下是否始终“粘”在该在的位置——这需要把定位逻辑和父级渲染上下文绑在一起看，而不是单独优化伪元素样式。 
