CSS语音气泡/工具提示生成器
生成语音气泡/工具提示形状 — 使用经典border-triangle技术（::after/::before）而不是clip-path的圆角框加可定位的尖角尾部。设置颜色、半径、填充、可选的轮廓，以及尾部的边缘/偏移/大小，获得实时预览和可复制的CSS + HTML。
输入
在预览中显示并复制到HTML片段的示例内容。
生成的规则限定在此类中，因此不会与您自己的样式冲突。
颜色
形状
也勾勒尾部 — 在后面添加第二个更大的伪元素（::before）。
尾部
气泡的哪条边缘尾部指向。
沿该边缘的位置 — 0 = 开始，50 = 中心，100 = 结束。
输出
您的语音气泡将在此处出现。
实际生成的气泡，隔离在Shadow DOM中。
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-speech-bubble-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"bubbleText": "Hey! Got a sec to chat? 💬",
"className": "bubble",
"backgroundColor": "#4f46e5",
"textColor": "#ffffff",
"borderRadius": "16",
"paddingX": "18",
"paddingY": "12",
"showBorder": "",
"borderColor": "#312e81",
"borderWidth": "2",
"tailPosition": "bottom",
"tailOffset": "50",
"tailSize": "14"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-speech-bubble-generator` tool (CSS Speech Bubble / Tooltip Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-speech-bubble-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS语音气泡/工具提示生成器 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
| 每次 API/MCP 调用费用 | 5 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
此工具的作用
CSS语音气泡/工具提示生成器在单个 <div> 上使用 ::after 伪元素（以及当启用边框时使用 ::before）构建带有尖角尾部的圆角聊天气泡、标注或工具提示形状。没有 clip-path、没有图像、没有JavaScript — 尾部是经典的border-triangle技巧：一个零大小的框，其中三个边框边是透明的，第四个是彩色的，会塌陷成一个实心三角形。
设置背景颜色、圆角半径、填充和可选的轮廓，然后选择尾部指向气泡的哪条边缘、沿该边缘的距离，以及其大小。您可以获得实时预览（从实际生成的标记呈现，隔离在Shadow DOM中，以便伪元素实际显示）以及可复制的CSS + HTML。
如何使用
- 输入要预览的 气泡文本，并为该块指定 类名 以防止与您自己的样式冲突。
- 选择 背景色 和 文本颜色。
- 调整 边框半径 以及左/右和上/下的 填充。
- 如果需要有轮廓的气泡，请启用 添加边框 — 这也会使用后面的第二个更大的伪元素来勾勒尾部。
- 在 尾部 下，选择尾部指向的 边缘、沿该边缘的 偏移（0 = 开始，50 = 中心，100 = 结束），以及其 大小。
- 将 HTML 复制到您的标记中，将 CSS 复制到您的样式表中。
边框为什么需要第二个伪元素？
CSS边框无法跟随三角形的对角线边缘，因此尾部上的轮廓是伪造的：::before 以边框颜色绘制略大的三角形，::after 以背景颜色绘制实际大小的三角形直接在其上方，锚定在完全相同的点。周围可见的内容读起来像是轮廓。
为什么实时预览是Shadow DOM而不是普通预览框？
尾部仅作为 ::after/::before 伪元素存在 — 没有办法通过内联 style 属性表达它，这是大多数工具预览安全呈现的方式。此预览改为将实际生成的 <style> 和HTML挂载在隔离的Shadow DOM中，因此您看到的正是您即将粘贴的内容，包括尾部。
如果我需要不同的形状，而不是带尾部的气泡，我该怎么办？
对于多边形形状（箭头、星星、六边形）或使用 clip-path 而不是尾部制作的气泡，请使用CSS剪切路径生成器。要在没有尾部的情况下四舍五入框，CSS边框半径生成器提供更精细的按角控制，对于任何元素的简单投影，请参见CSS框阴影生成器。