核心原理是将元素宽高设为0，仅设单边border为实色、其余三边透明，浏览器自动渲染成等腰直角三角形；方向由实色边决定，::before需absolute定位且气泡容器设relative，偶数border-width和整数像素定位可防锯齿与缝隙。
用
配合
画三角形箭头的原理
核心就一条：把一个元素的宽高设为
，只给某一边的
设颜色和宽度，其余三边设为透明或
，浏览器渲染时会自动把交界处“挤”成等腰直角三角形。比如
+ 其余
为
，就能得到朝上的小箭头。
关键点在于：
必须用
（不能用
或省略），且四边
要一致才能保证角度对称；箭头方向由哪条边有实色决定。
朝上：设
为实色，其余透明
朝下：设
为实色
朝左：设
为实色
朝右：设
为实色
气泡框定位必须用
气泡主体通常用相对定位（
），这样
才能以它为参考系精确定位箭头。漏掉这一步，箭头会相对于整个页面或最近的定位祖先偏移，根本对不准。
常见错误是只写了
和
，但没加
，结果箭头飘在别处，或者被其他内容遮挡。
立即学习
“
前端免费学习笔记（深入）
”；
气泡容器需加
必须设
用
/
精调箭头位置，注意还要减去一半箭头尺寸（例如箭头高 10px，想让尖端对准中线，
往往要设
再微调）
避免箭头边缘出现模糊或锯齿的细节处理
CSS 三角形本质是两条斜边拼接，缩放或 subpixel 渲染下容易发虚。最稳妥的解法是让箭头尺寸为偶数（如
、
），并确保其定位值也是整数像素（避开
这类可能算出小数的情况）。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
另一个高频问题是箭头和气泡主体之间有 1px 缝隙——这是因为
三角形的底边和气泡边框没完全重叠。解决办法是让
的
略低于气泡主体，并用
或负
微移，例如
把箭头往上“塞”进气泡边缘。
优先用偶数
（如
而非
）
避免
，改用具体像素值（如
）
加
并配合
消除缝隙
响应式场景下箭头尺寸与位置的适配陷阱
当气泡用于移动端或字体缩放时，固定像素的
会让箭头显得过大或过小。更鲁棒的做法是用
或
单位，让箭头随字号缩放；同时用
动态计算位置，比如
代替死值
。
另外要注意：如果气泡容器设置了
，
的
也会被缩放，但边缘抗锯齿表现更差。这种情况下建议改用 SVG 箭头或
，而不是硬扛
。
用
替代
更易适配字号变化
位置计算优先用
，避免绝对像素偏移失准
慎用
，它会让
三角形渲染质量明显下降
真正难的不是画出箭头，而是让它在不同缩放、不同设备、不同字体大小下都严丝合缝地咬住气泡边缘——这时候多一像素的偏差，用户一眼就能感觉到不专业。
border::before0border0border-top: 10px solid #333bordertransparentborder-colortransparentnoneborder-widthborder-bottomborder-topborder-rightborder-left::beforeposition: absoluteposition: relative::beforecontent: ""borderposition: absoluteposition: relative::beforeposition: absolutetoplefttop50%8px12pxtop: 50%border::beforez-indexmargintransformtransform: translateY(-1px)border-width8px7pxtop: 50%top: 12pxz-index: -1transformborder-widthemremcalc()left: calc(50% - 0.5em)left: 20pxtransform: scale()::beforeborderclip-pathborder0.5em8pxcalc()transform: scale()border