如何利用HTML制作带三角形箭头的气泡_通过CSS伪元素border技巧-html教程-PHP中文网

伪元素三角形飘到页面角落的根本原因是定位上下文缺失，必须给气泡外层容器设position: relative，否则伪元素会相对于body等最近已定位祖先定位；同时需确保伪元素有content: ""、三边transparent且单边有色。

如何利用html制作带三角形箭头的气泡_通过css伪元素border技巧

直接用 ::before 或 ::after 伪元素 + border 技巧就能做出三角形箭头，不需要图片、不依赖 JS，但必须满足三个前提：父容器设 position: relative、伪元素有 content: ""、边框三边透明且仅单边有色。

根本原因是定位上下文缺失。伪元素默认相对于最近的已定位祖先（比如 body）定位，而不是你写的气泡容器。

务必给气泡外层容器加 position: relative（不是内容区，是包裹整个气泡的 <div class="bubble">）<li> <code>::before 或 ::after 必须设 position: absolute
常见错误：只给内部 <p></p> 加 relative，结果箭头锚定在上
如果父容器用了 transform（比如缩放或平移），箭头也要同步调整 top/left，不能只靠 transform 对齐

箭头朝哪，就让哪边的 border 有色；其余三边必须是 transparent，且不能拆成四个 border-* 单独写——部分浏览器会忽略透明边框的渲染逻辑。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

向下箭头（贴气泡底边）：border-top: 8px solid #333; border-left: 8px solid transparent; border-right: 8px solid transparent;
向右箭头（贴气泡右边）：border-left: 8px solid #333; border-top: 8px solid transparent; border-bottom: 8px solid transparent;
向左箭头（贴气泡左边）：border-right: 8px solid #333; border-top: 8px solid transparent; border-bottom: 8px solid transparent;
向上箭头（贴气泡顶边）：border-bottom: 8px solid #333; border-left: 8px solid transparent; border-right: 8px solid transparent;
尺寸统一用 px，避免用 em 或 rem —— 缩放时易失真

伪元素以自身左上角为定位基准，不是尖端。想让尖端贴边，得靠偏移+微调，不能只靠 left/top 硬算。

水平居中（如顶部/底部箭头）：left: 50%; transform: translateX(-50%);
垂直居中（如左侧/右侧箭头）：top: 50%; transform: translateY(-50%);
贴底边时，bottom: -8px 是常见起点，但若气泡有 border-radius，建议再加 margin-bottom: -1px 或略调 bottom 值，否则尖端会“顶出”圆角
IE9–10 不支持 transform，需降级为 left: calc(50% - 8px)，但注意 IE9 不支持 calc() 中的百分比运算，得用固定像素