CSSで吹き出しを表現する

チャットやサイトのコメント欄で、閲覧者からのコメントを吹き出し状にしたい時など、今まではわざわざ背景画像などを用意して配置していたりしましたが、CSSだけで表現することが出来るようになりました。その方法を簡単にご紹介します。

1.HTMLを記述

<div class="comment balloon-under">
	<p>下付き吹き出し</p>
</div>
<div class="comment balloon-top">
	<p>上付き吹き出し</p>
</div>
<div class="comment balloon-left">
	<p>左付き吹き出し</p>
</div>
<div class="comment balloon-right">
	<p>右付き吹き出し</p>
</div>
<div class="comment-sub">
	<p>ボーダー吹き出し</p>
</div>

<p>下付き吹き出し</p>

</div>

<p>上付き吹き出し</p>

</div>

<p>左付き吹き出し</p>

</div>

<p>右付き吹き出し</p>

</div>

<p>ボーダー吹き出し</p>

</div>

2.CSSを記述する

/* 共通css */
.comment {
	background: #222;
	border-radius: 5px;
	color: #aaa;
	padding: 10px;
	position: relative;
	margin:30px;
}

/* 吹き出し(下) */
.balloon-under::after {
	border-left: solid 7px transparent;
	border-right: solid 7px transparent;
	border-top: solid 10px #222;
	bottom: -10px;
	content:"";
	display:block;
	height:0;
	left:50%;
	margin-left:-5px;
	position: absolute;
	width:0;
}

/* 吹き出し(上) */
.balloon-top::after {
	border-left: solid 7px transparent;
	border-right: solid 7px transparent;
	border-bottom: solid 10px #222;
	top: -10px;
	content:"";
	display:block;
	height:0;
	left:50%;
	margin-left:-5px;
	position: absolute;
	width:0;
}

/* 吹き出し(左) */
.balloon-left::after {
	border-top: solid 7px transparent;
	border-bottom: solid 7px transparent;
	border-right: solid 10px #222;
	left: -10px;
	content:"";
	display:block;
	height:0;
	top:50%;
	margin-top:-7px;
	position: absolute;
	width:0;
}

/* 吹き出し(右) */
.balloon-right::after {
	border-top: solid 7px transparent;
	border-bottom: solid 7px transparent;
	border-left: solid 10px #222;
	right: -10px;
	content:"";
	display:block;
	height:0;
	top:50%;
	margin-top:-7px;
	position: absolute;
	width:0;
}

/* ボーダー吹き出し */
.comment-sub {
	background: #FFF;
	border: solid 3px #222;
	border-radius: 5px;
	color: #000;
	padding: 10px;
	position: relative;
	margin:30px;
}
.comment-sub::before,
.comment-sub::after {
	border-left: solid 10px transparent;
	border-right: solid 10px transparent;
	border-top: solid 15px #222;
	bottom: -15px;
	content:"";
	display:block;
	height:0;
	left:50%;
	margin-left:-5px;
	position: absolute;
	width:0;
}
.comment-sub::after {
	border-top-color: #FFF;
	bottom:-10px;
}

/* 共通css */

.comment {

background: #222;

border-radius: 5px;

color: #aaa;

padding: 10px;

position: relative;

margin:30px;

}

/* 吹き出し(下) */

.balloon-under::after {

border-left: solid 7px transparent;

border-right: solid 7px transparent;

border-top: solid 10px #222;

bottom: -10px;

content:"";

display:block;

height:0;

left:50%;

margin-left:-5px;

position: absolute;

width:0;

}

/* 吹き出し(上) */

.balloon-top::after {

border-left: solid 7px transparent;

border-right: solid 7px transparent;

border-bottom: solid 10px #222;

top: -10px;

content:"";

display:block;

height:0;

left:50%;

margin-left:-5px;

position: absolute;

width:0;

}

/* 吹き出し(左) */

.balloon-left::after {

border-top: solid 7px transparent;

border-bottom: solid 7px transparent;

border-right: solid 10px #222;

left: -10px;

content:"";

display:block;

height:0;

top:50%;

margin-top:-7px;

position: absolute;

width:0;

}

/* 吹き出し(右) */

.balloon-right::after {

border-top: solid 7px transparent;

border-bottom: solid 7px transparent;

border-left: solid 10px #222;

right: -10px;

content:"";

display:block;

height:0;

top:50%;

margin-top:-7px;

position: absolute;

width:0;

}

/* ボーダー吹き出し */

.comment-sub {

background: #FFF;

border: solid 3px #222;

border-radius: 5px;

color: #000;

padding: 10px;

position: relative;

margin:30px;

}

.comment-sub::before,

.comment-sub::after {

border-left: solid 10px transparent;

border-right: solid 10px transparent;

border-top: solid 15px #222;

bottom: -15px;

content:"";

display:block;

height:0;

left:50%;

margin-left:-5px;

position: absolute;

width:0;

}

.comment-sub::after {

border-top-color: #FFF;

bottom:-10px;

}

下付き吹き出しの場合、左右のborderを非表示にして、border-topのみ表示し、絶対配置で下に10pxずらして配置しています。

以上になります。