Генератор речевого пузыря / всплывающей подсказки 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"
}'Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.
Спросите у ИИ-агента
Use the IOTools `css-speech-bubble-generator` tool (CSS Speech Bubble / Tooltip Generator) on this input:
YOUR_INPUT_HEREВставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.
Виджет для встраивания
<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 создает форму пузыря чата, выноски или всплывающей подсказки со скругленными углами и заостренным хвостиком, используя только один псевдоэлемент ::after (и, когда граница активна, ::before) на одном <div>. Нет 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 Clip-Path. Чтобы скруглить прямоугольник без хвоста, Генератор радиуса границы CSS обеспечивает более точное управление для каждого угла, а для простой тени под любым элементом см. Генератор тени поля CSS.