CSS で「吹き出し」をつくってみる

HTML&CSS

2014.12.25

こんにちは。mackyです！
最近、何かと吹き出しを目にすることが多かったので自分でもサンプルを作成してみることにしました。
よかったら読んでみてください。

では、早速。

HTML

HTMLはこの一行。

<div class="baloon">お久しぶりです。まっきーです。ここに好きなテキストをいれてね。</div>

CSS：スタンダードな角丸長方形

使える環境であれば使いたい :before 。CSSもシンプルにできてしまいます。

.baloon {
	width: 400px;
	padding: 10px;
	background: #FF3399;
	position: relative;
	color: #fff;
	border-radius: 5px;
	text-align: center;
}
.baloon:before {
	content: "";
	position: absolute;
	bottom: -20px;
	right: 10%;
	border: 10px solid transparent;
	border-top: 10px solid #FF3399;
}

CSS：ちょっとアレンジ吹き出し風

使える環境であれば使いたい :before 。CSSもシンプルにできてしまいます。

HTML

<div class="circle"><p class="inner">Merry<br>

Christmas!</p>

</div>

.circle {
	width: 100px;
	height: 100px;
	margin: 0 0 20px 0;
	padding: 5px;
	background: #FF3399;
	position: relative;
	color: #fff;
	border-radius: 50%; 
	text-align: center;
}

.circle p {
	margin: 30px 0 0 0;
}

.circle .inner {
	width: 100px;
	height: 100px;
	display: table-cell;
	vertical-align: middle;
}

.circle:before {
	content: "";
	position: absolute;
	bottom: -19px;
	right: 42%;
	border: 10px solid transparent;
	border-top: 10px solid #FF3399;
}

年末にかけて、LINE風のQ&Aページのデザインをよく見かけた気がします。対象ブラウザにもよりますが、使える環境であれば三角形の位置や大きさなどをアレンジして色々使ってみてください。
それでは素敵なクリスマスを。。。