CSSとのみで作る吹き出しボックス[CSS]

Nettuts+より、CSSのみで作成する吹き出しボックスの紹介です。

arrow0904041.jpg

ソースは下記のようになっています。

HTML

<blockquote id="two">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
	ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
	ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
	<span class="arrow" />
</blockquote>

CSS

blockquote#two {
	width: 250px;
	background: #e3e3e3;
	padding: 25px;
	position: relative;
}

blockquote#two .arrow {
	width: 0;
	height: 0;
	line-height: 0;
	border-top: 40px solid #e3e3e3;
	border-left: none;
	border-right: 30px solid white;
	position: absolute;
	bottom: 60%;
	right: -30px;
}

このサンプルのソースでは、<blockquote>を使っていますが、<div>など、他のタグでも大丈夫です。