如何使用CSS盒模型制作三角形提示框？-css教程-PHP中文网

纯CSS画三角形唯一靠谱方案是利用border斜角渲染特性：设宽高为0，仅保留一个方向有色边框，其余透明；实际应用需用伪元素实现提示框箭头，并注意定位、兼容性及响应式适配。

如何使用css盒模型制作三角形提示框？

用 `border` 技巧画三角形是唯一靠谱方案

纯 CSS 画三角形不依赖 SVG 或伪元素叠加，核心就是利用 border 的斜角渲染特性。浏览器把四个方向的边框交汇处自动渲染成斜线，只要把元素宽高设为 0，再只保留一个方向有颜色、其余设为透明，就能得到清晰锐利的三角形。

常见错误是给元素设了 width 或 height 非零值，导致三角形被撑开变形；或者忘了把不需要的边框设为 transparent，结果出现多余色块。

width: 0; height: 0; 必须写，否则 border 交汇点不聚焦
只保留一个方向的 border 有颜色（如 border-top: 10px solid #333;），其余三个方向必须显式设为 transparent
三角形朝向由哪个方向的 border 有色决定：上/下/左/右分别对应朝下/朝上/朝右/朝左
尺寸由 border 宽度控制，例如 border-top: 8px solid #000; 得到高约 8px 的等腰直角三角形

用 `::before` 或 `::after` 做提示框箭头更实用

单独一个三角形没意义，实际要做的是带内容的提示框（比如气泡弹窗），箭头必须精准对齐、可定位、不遮挡文字。这时必须用伪元素，主容器负责文字区域，伪元素负责箭头，两者通过 position: absolute 叠加。

容易踩的坑是父容器没设 position: relative，导致伪元素相对于 body 定位，完全跑偏；或者伪元素的 top/left 值没结合 border 宽度计算，造成箭头悬空或嵌入框内。

主容器加 position: relative;
伪元素设 content: ""; + position: absolute;

若箭头朝下，常用写法：

.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 20px;
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

border-width 四个值顺序是上右下左，中间两个横向值决定底边宽度，第一个值决定高度

IE8 不支持 `transparent` 时要用 `rgba(0,0,0,0)`

老项目还要兼容 IE8？那不能用 transparent——它在 IE8 下部分场景会渲染成黑色。替代方案是用 rgba()，但注意 IE8 不支持 rgba，所以得用条件注释或 hack。不过更现实的做法是：如果真要支持 IE8，直接用 PNG 箭头图，CSS 三角形方案主动放弃。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

现代项目基本不用考虑这点，但如果你接手的代码里混着 border-color: #000 transparent transparent transparent; 却在 IE8 下出黑块，问题就在这儿。

安全写法（兼顾旧浏览器）：border-color: #000 \9; border-color: rgba(0,0,0,0) \9;（仅限需要 hack 的场景）
更推荐：确认目标浏览器列表，明确不支持 IE8 就直接用 transparent
别试图用 hsl() 或其他颜色函数替代，IE8 对所有非十六进制颜色都不可靠