カラー吹き出しスタイルシートCSSジェネレーター～ウェブツールチップ

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

▼吹き出しの大きさ
（16:9） width
(256～32px)

▼吹き出しメッセージ

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

吹き出しの構成 - 操作パネル

吹き出しの位置	上右下左

矢の大きさ	px
矢の位置	50%が中央
背景色
枠線の幅	px
枠線の色
文字の色
文字の大きさ	px

吹き出しの大きさは、吹き出しクラス名を定義した領域のCSSのwidth,heifgtの指定で変更できます。
下のTwitterボタンの吹き出しは、このカラー吹き出しCSSジェネレーターで作成しました。
使用の吹き出しは、 c 2016 By Simon Hojberg cssarrowpleas で作成しました。

/* CSS balloon_top */
.balloon_top {
	position: relative;
	background: #ffffff;
	border: 4px solid #808080;

        font-size: 12px;
        text-align: center;
        margin-top: 5px; 
        padding: 3px;
        font-family: arial, "ＭＳ ゴシック",sans-serif;
        border-radius: 5px; 
        color: #000000;
}
.balloon_top:after, .balloon_top:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.balloon_top:after {
	border-color: rgba(255, 255, 255, 0); /*after*/
	border-top-color: #ffffff; /*after*/
	border-width: 30px; /*after*/
	margin-left: -30px; /*after*/
}
.balloon_top:before {
	border-color: rgba(128, 128, 128, 0); /*before*/
	border-top-color: #808080; /*before*/
	border-width: 36px; /*before*/
	margin-left: -36px; /*before*/
}

/* HTML */
<div class="balloon_top" width="160" height="90"></div>