[CSS]:after擬似要素を使ってCSSだけで吹き出しを作る

吹き出しといえば「笑う」みたいな変な固定観念を持ちあわせています下山です。
今回は笑いながら記事を書きます。

:after擬似要素を使って吹き出しの作り方をまとめたンゴ。

まずはデモ

要はdivに擬似要素で三角を付けてpositionで位置指定するだけです。

CSSで三角形を作るには

.sankaku {
	border:10px solid transparent;
	border-bottom-color:#369;
	border-top-width:0;
	width:0;
}

と書くと「▲」が描けます。
これをある要素(divとか)に擬似要素(:after)として追加してあげれば吹き出しになります。

CSSで吹き出し(上)

html

吹き出しちゃったプププー

CSS

.fukidasi_top {
	width:200px;
	background-color:#369;
	border-radius:6px;
	position:relative;
	padding:30px;
	color:#fff;
}

.fukidasi_top:after {
	border:10px solid transparent;
	border-bottom-color:#369;
	border-top-width:0;
	width:0;
	top:-10px;
	content:"";
	display:block;
	left:20px;
	position:absolute;
}

CSSで吹き出し(下)

html

吹き出しちゃったプププー

CSS

.fukidasi_bottom {
	width:200px;
	background-color:#369;
	border-radius:6px;
	position:relative;
	padding:30px;
	color:#fff;
}

.fukidasi_bottom:after {
	border:10px solid transparent;
	border-top-color:#369;
	border-bottom-width:0;
	width:0;
	bottom:-10px;
	content:"";
	display:block;
	left:20px;
	position:absolute;
}

CSSで吹き出し(右)

html

吹き出しちゃったプププー

CSS

.fukidasi_right {
	width:200px;
	background-color:#369;
	border-radius:6px;
	position:relative;
	padding:30px;
	color:#fff;
}

.fukidasi_right:after {
	border:10px solid transparent;
	border-left-color:#369;
	border-right-width:0;
	width:0;
	right:-10px;
	content:"";
	display:block;
	top:20px;
	position:absolute;
}

CSSで吹き出し(左)

html

吹き出しちゃったプププー

CSS

.fukidasi_left {
	width:200px;
	background-color:#369;
	border-radius:6px;
	position:relative;
	padding:30px;
	color:#fff;
}

.fukidasi_left:after {
	border:10px solid transparent;
	border-right-color:#369;
	border-left-width:0;
	width:0;
	left:-10px;
	content:"";
	display:block;
	top:20px;
	position:absolute;
}

色、大きさ等は適当に変更して使ってください。

IE8以上、その他のブラウザで表示できる予定・・・