用 border 画三角因伪元素零资源、兼容 ie8，但仅限单色实心；需设宽高为 0、四边 solid transparent 并指定单边颜色，配合绝对定位与像素偏移，避免 transform 居中及渲染模糊。
为什么用 border 画三角而不是 SVG 或图片
因为伪元素（::before/::after）本身不占 DOM 节点，配合 border 技巧能零 JS、零额外资源实现箭头，兼容性到 IE8 都行。但前提是：三角必须是单色、实心、无边框——一旦要描边、渐变或圆角，border 就撑不住了。
常见错误现象：border 三角边缘发虚、在高 DPI 屏幕上模糊、或者和气泡主体对不齐。
- 根本原因是：
border三角靠的是三边透明 + 一边有色，渲染时像素对齐依赖父元素的font-size和line-height，不是绝对定位友好型 - 推荐做法：把气泡容器设为
position: relative，伪元素用position: absolute定位，并显式设置top/left像素值，别用50%加transform: translate(-50%, -50%)——那会让三角偏移半像素 - 三角尺寸统一用
8px（即四边border-width: 8px），太大易露白边，太小在 Retina 屏上糊成一团
::after 画右向箭头时 border 参数怎么配
右向箭头本质是「左边框有色，其余三边透明」，但很多人写成 border-left-color: #333 就完事，结果没显示——漏了关键前提：宽高必须为 0，且三边 border-style 得是 solid（哪怕透明）。
正确写法：
dialog::after {
content: "";
position: absolute;
top: 50%;
right: -16px;
width: 0;
height: 0;
border: 8px solid transparent;
border-left-color: #333;
margin-top: -8px;
}
-
border: 8px solid transparent是基础，不能拆成四个border-*单独写，否则部分浏览器会忽略透明边框的渲染逻辑 -
margin-top: -8px是为了垂直居中（三角高度 = 2 × border-width），别用transform: translateY(-50%)，它在某些安卓 WebView 里失效 - 如果气泡背景是渐变或图片，
border-left-color就得和背景“模拟融合”，此时不如换clip-path或 inline SVG
移动端点击区域小、箭头错位怎么办
伪元素默认不可点击，且 border 三角本身没有实际尺寸（width/height 是 0），导致触摸热区过小，尤其 iOS Safari 对 ::after 的点击响应极弱。
- 解决办法：给伪元素加
pointer-events: auto，再用padding-right: 24px（比三角宽多留 8px）撑开父容器点击区 - 真机调试时发现箭头飘移？大概率是父容器用了
flex或grid，而伪元素的top: 50%参照的是 flex 容器的交叉轴起点——改用top: calc(50% - 8px)更稳 - Android 4.4–6.0 的 UC 浏览器不支持
border三角的透明边框渲染，降级方案：用 base64 编码的 1×1 箭头 PNG 作为background-image
IE 下三角尖角发钝或消失
IE9–11 对 border 三角的支持有缺陷：当任意一边 border-color 为 transparent 时，若该边 border-style 不是 solid，整个三角就塌掉。
- 必须写全：
border: 8px solid transparent; border-left-color: #333;，不能省略solid或换成dashed - IE10–11 还有个坑：如果伪元素的
content是空字符串但没加引号（比如写成content: ""），IE 会直接忽略整个伪元素——务必加双引号 - 更隐蔽的问题：IE 对
position: absolute在display: table-cell里的定位计算异常，如果气泡用了display: table布局，三角位置必然错乱，得切回block+flex
三角看着简单，但每个像素都卡在浏览器渲染管线的缝里；调对一次不难，难的是下次换个项目、换个主题色、换个基础 UI 库时，还得重新验一遍这些边界条件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
