CSS 气泡对话框生成器
用 CSS 三角生成对话框气泡：方向、宽高、圆角、边框宽度与颜色、背景色、三角大小与偏移都能调，实时预览并输出含 ::before/::after 的完整 CSS 与 HTML 片段。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
三角中心到气泡左（上）边的距离，会自动夹到气泡范围内
实时预览
CSS
.bubble {
position: relative;
box-sizing: border-box;
width: 240px;
min-height: 72px;
padding: 12px 16px;
background: #FFFFFF;
border: 2px solid #D6D9DE;
border-radius: 12px;
}
.bubble::before,
.bubble::after {
content: "";
position: absolute;
width: 0;
height: 0;
border-style: solid;
pointer-events: none;
}
.bubble::before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
pointer-events: none;
top: 100%;
left: 118px;
margin-left: -14.8px;
border-width: 14.8px 14.8px 0 14.8px;
border-color: #D6D9DE transparent transparent transparent;
}
.bubble::after {
position: absolute;
width: 0;
height: 0;
border-style: solid;
pointer-events: none;
top: 100%;
left: 118px;
margin-left: -12px;
border-width: 12px 12px 0 12px;
border-color: #FFFFFF transparent transparent transparent;
}
HTML
<div class="bubble">这是一段气泡文字，用来演示对话框效果。</div>
这个工具能做什么
- 做 tooltip、聊天气泡或标签提示时不用手写 border 三角：调方向和尺寸，右侧直接给出可以粘贴的 CSS 与 HTML。
- 气泡带边框最容易翻车的地方（三角处的边框开口）已经在 ::before / ::after 两层三角里处理好了，改颜色和圆角也不会露馅。
- 三角位置随时可调：偏移量会被自动夹在气泡范围内，贴着左边缘或居中都不会出现三角悬空。
- 需要阴影时用 filter 的 drop-shadow，阴影会贴着「气泡 + 三角」的轮廓，而不是只在矩形盒子上投一条直角阴影。
示例
输入
默认圆角气泡预设：方向向下，宽度 240px，最小高度 72px，圆角 12px，边框 2px #D6D9DE，背景 #FFFFFF，三角高度 12px，偏移 120px
输出
.bubble 声明 position: relative、width: 240px、border: 2px solid #D6D9DE、border-radius: 12px；.bubble::before 用 14.8px 的 border-width 画边框色三角，top: 100%、left: 118px、margin-left: -14.8px；.bubble::after 用 12px 画背景色三角，left: 118px、margin-left: -12px
外层三角比内层大 2px × √2 ≈ 2.8px，正好让斜边间距等于边框宽度 2px，所以三角处的边框看起来是连续开口的。
常见问题
为什么要用 ::before 和 ::after 两层三角？
单层三角只能做出纯色气泡。有边框时需要一个边框色的三角垫在下面、一个背景色的三角盖在上面，才能让边框沿三角轮廓绕一圈。两层三角的偏移量差了一个 borderWidth，内层正好盖住外层中间那部分。
三角偏移填得很大或很小会怎样？
会被自动夹到 [H, span - H] 范围内（H 是外层三角的半宽，span 是宽度或最小高度），这样三角永远不会超出气泡边缘；如果气泡太窄导致范围为空，就直接居中。填负数会提示偏移不合法。
为什么阴影要用 drop-shadow 而不是 box-shadow？
box-shadow 只认元素的矩形盒子，三角部分（伪元素）不会带上阴影，看起来像悬浮的直角影子。drop-shadow 作用于整个渲染后的轮廓，包括伪元素三角，所以阴影能跟着气泡形状走。
颜色和尺寸写得不对会怎样？
颜色只接受 3 / 4 / 6 / 8 位十六进制（如 #fff、#FFFFFF、#FF000080），写颜色名或 rgb() 会报「颜色不合法」。尺寸类数值超出范围会被夹到允许区间（宽度 40–800、圆角 0–200、边框 0–20、三角 2–80），而不是直接报错。
输出的 HTML 片段能直接改吗？
可以，它就是 <div class="bubble">文字</div>，里面的文字会被转义（& < > " 变成实体），所以粘进去不会破坏结构。换成自己的 class 名时记得同步改 CSS 里的选择器。
关键词：cssbubbletooltipspeech bubblearrowtriangle气泡对话框提示框三角气泡生成器