用 border 切三角形因纯 css 实现轻量、可缩放、易配色且不依赖资源；原理是宽高为 0 元素的四边不同色 border 渲染为四个等腰直角三角形，仅留一色其余 transparent 即得单向三角形；须用 ::before/::after 伪元素承载，设 content: ""，定位时需补偿 border 宽度偏移，方向由对应边颜色决定，响应式需用相对单位并避免父容器 overflow: hidden 裁剪。
为什么用 border 切三角形而不是 SVG 或 PNG
因为纯 CSS 实现轻量、可缩放、易配色，且不依赖资源加载。但前提是得理解 border 在宽度不为零、四边颜色不同时的渲染逻辑：当一个元素宽高为 0，只设四个方向的 border，浏览器会把它们画成四个等腰直角三角形拼成的“X”形；若只留一个方向有颜色、其余透明，就能切出单个指向三角形。
常见错误是直接给对话框本体加 border，结果整个盒子变形；正确做法是用 ::before 或 ::after 伪元素单独承载这个三角形。
::before 伪元素定位三角形的关键偏移计算
三角形本质是宽高为 0 的块，靠 border “撑”出来，所以它的定位原点在伪元素左上角。要让三角形尖端精准对齐对话框顶部中点，必须手动补偿偏移：
- 若三角形底边宽
12px（即左右border各6px），则需用left: 50%+margin-left: -6px水平居中 - 垂直方向：伪元素设
top: -6px（假设border-width为6px），才能让三角形底部贴住对话框上边缘 - 别漏掉
content: ""—— 没这句，::before不渲染
示例代码：
.bubble {
position: relative;
background: #fff;
border: 1px solid #ccc;
}
.bubble::before {
content: "";
position: absolute;
top: -6px;
left: 50%;
margin-left: -6px;
width: 0;
height: 0;
border: 6px solid transparent;
border-bottom-color: #fff;
}
不同指向方向的 border 配置对照
三角形朝向完全由哪条边设颜色决定，其他三边必须为 transparent。容易错在写反方向或漏设透明：
- 向上指：
border-bottom-color: #xxx（其余border-top/right/left-color: transparent） - 向下指：
border-top-color: #xxx - 向左指：
border-right-color: #xxx - 向右指：
border-left-color: #xxx
注意：所有 border-width 必须一致，否则三角形歪斜；若要加阴影或描边，不能直接给伪元素加 box-shadow（会被 border 遮盖），得用多层伪元素或 filter: drop-shadow()。
响应式下三角形失真的常见原因
当对话框宽度随屏幕变化时，三角形仍按固定像素居中，可能偏移。解决方法不是 JS 计算，而是改用相对单位：
- 用
em或rem设border-width，使其随字体缩放 - 水平居中改用
left: calc(50% - 0.375em)（假设border-width: 0.375em） - 避免在媒体查询里反复重写伪元素样式，优先用 CSS 自定义属性统一控制尺寸
最常被忽略的是父容器的 overflow: hidden —— 如果对话框本身设了这个，三角形会被裁掉，必须确保伪元素在裁剪区域外渲染。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
