吹き出し（ツールチップ）のCSSジェネレーター
上下左右お好みの方向にしっぽがついた、カスタマイズ性の高い吹き出しデザインを生成します。
プレビュー
<div class="speech-bubble">{{text_content}}</div>.speech-bubble {
position: relative;
display: inline-block;
padding: 15px 25px;
background: {{bg_color}};
color: {{text_color}};
border-radius: {{radius}}px;
margin: 20px;
}
.speech-bubble::after {
content: "";
position: absolute;
{{arrow_css}}
width: 0;
height: 0;
border-style: solid;
}機能、使い方
- 柔軟な配置: 上下左右の 4 方向に対応し、吹き出しの「しっぽ」の位置も自由に変更可能です。
- 擬似要素による実装:
::afterを使用した軽量な実装方法を採用。余計な HTML タグを増やさずに吹き出しを作れます。 - リアルタイム更新: テキスト、角丸、カラー。変更はすべて即座にプレビューとコードに反映されます。
