カラー吹き出しCSSジェネレーター（丸形編）

▼吹き出しの大きさ
（width/height）
(256～32px)

▼吹き出しメッセージ カラー吹き出しを作ろう！ 123

カラー吹き出しを作ろう！
123

---

吹き出しの位置	上   右   下   左
矢の大きさ	px
背景色
文字の色
文字の大きさ	px

---

• 吹き出しの大きさは、吹き出しクラス名を定義した領域のCSSのwidth,heifgtの指定で変更できます。
• 下のTwitterボタンの吹き出しは、このカラー吹き出しCSSジェネレーターで作成しました。
• 使用の吹き出しは、 CSSで作る！吹き出しデザインのサンプル19選 より

/* balloon_top 丸形 */ .balloon_top { position: relative; display: inline-block; /*margin: 1.5em 0;*/ padding: 1px 5px; /*width: 32px;*/ /*height: 32px;*/ line-height: 32px; vertical-align: middle; text-align: center; color: #ffffff; font-size: 12px; font-family: arial, "ＭＳ ゴシック",sans-serif; font-weight: bold; background: #70a6ff; border-radius: 50%; box-sizing: border-box; } .balloon_top:before{ content: ""; position: absolute; bottom: -54px; left: 50%; margin-left: -30px; border: 30px solid transparent; border-top: 30px solid #70a6ff; z-index: 0; }

CSSジェネレーター

• ≫
• ≫
• ≫