CSS 吹き出し

CSSのみで吹き出し（バルーン）を作るサンプルです。

SVGで作る方法もありますが、CSSなので比較的とっかかりやすい印象です。

また、画像を作成する手間も省け、内容が変動する場合に重宝します。

下から吹き出しバージョン

吹き出しサンプル


#balloon1 {
	position: relative;
	display: inline-block;
	padding: 0 15px;
	width: auto;
	min-width: 115px;
	height: 40px;
	line-height: 34px;
	color: #19283C;
	text-align: center;
	background: #FFF;
	border: 3px solid #19283C;
	z-index: 0;
	margin: 0 0 20px;
	border-radius: 10px;	
}
#balloon1:before {
	content: "";
	position: absolute;
	bottom: -8px; left: 50%;
	margin-left: -9px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 9px 9px 0 9px;
	border-color: #FFF transparent transparent transparent;
	z-index: 0;
}
#balloon1:after {
	content: "";
	position: absolute;
	bottom: -12px; left: 50%;
	margin-left: -10px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 10px 0 10px;
	border-color: #19283C transparent transparent transparent;
	z-index: -1;
}

左から吹き出しバージョン

吹き出しサンプル



#balloon2 {
	position: relative;
	display: inline-block;
	padding: 0 15px;
	width: auto;
	min-width: 115px;
	height: 40px;
	line-height: 34px;
	color: #19283C;
	text-align: center;
	background: #FFF;
	border: 3px solid #19283C;
	z-index: 0;
	border-radius: 10px;
}
#balloon2:before {
	content: "";
	position: absolute;
	top: 50%; left: -8px;
	margin-top: -9px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 9px 9px 9px 0;
	border-color: transparent #FFF transparent transparent;
	z-index: 0;
}
#balloon2:after {
	content: "";
	position: absolute;
	top: 50%; left: -12px;/*位置調整*/
	margin-top: -10px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 10px 10px 0;
	border-color: transparent #19283C transparent transparent;
	z-index: -1;
}