[CSS]CSSだけで作る吹き出しのしっぽ

どんなボックスもしっぽさえつけりゃフキダシに見えるとエロイ人はいいました。
何故CSSだけで作るのか？それは…そこにCSSがあるからだ！

直接見る»

まあ、崩れたりもするんですけど。

bubbleとかtooltipとかでお馴染みの吹き出しを作るとき、
rounded corner（角丸）ボックスにつける゛しっぽ”をあえて画像を使わずに作る方法について、プラグイン作るときに調べたことのまとめ。

この方法、spanまみれになるのは避けられないものの、画像作る手間がなくスタイルをCSSで変更できるので、
動的にアレコレするようなものには向いてるじゃないかと。

しっぽの部分はdivの中にspanが入ってるだけだが、上下と左右で書き方が違います。
▼横向きのソース

<span class="a1"><span class="a2"><span class="a3"><span class="a4"><span class="a5"><span class="a6"></span></span></span></span></span></span>

▼上・下向きのソース

<span class="a1"></span><span class="a2"></span><span class="a3"></span><span class="a4"></span><span class="a5"></span><span class="a6"></span>

閉じタグを省略して<span />みたいな書き方をするとＩＥで崩れるので注意。

スタイルシートはそれぞれ次の通り。
しっぽはspanをブロック要素に変更して、左右または上下にボーダーを入れる。

横向き

#container{
	background: url(CW033_L.jpg) no-repeat left top;
	background-attachment: fixed;
}

#comment1{
	padding-right:14px;
	margin:10px;
	position:relative;
	width:250px;
}
.bubble{
    padding: 10px;
    text-align: left;
    border: 2px solid #234f5c;
	background-color:#1F2D38;
}
.tail {
	position:absolute;
	bottom:0.8em;
	right:0;
	height: 11px;
	width: 16px;
}
.tail span {
	display: block;
	background-color:#1F2D38;
	border-top:2px solid #234f5c;
	border-bottom:2px solid #234f5c;
	font-size:0;
	width: 3px;
	position:absolute;
	line-height:0;
	margin:0;
	padding:0;
}
.tail .a1 { height: 9px;left:0;}
.tail .a2 { height: 7px;left:2px;}
.tail .a3 { height: 5px;left:2px;}
.tail .a4 { height: 3px;left:2px;}
.tail .a5 { height: 1px;left:2px;}
.tail .a6 { background-color: #234f5c; border: 0; height: 2px;left:2px;}

spanは入れ子になっています。（マトリョーシュカみたいな感じ）
一番外枠になるdivにpadding-rightしてスペースを空けて、そこにしっぽを配置。
あと尻尾は絶対配置で、leftを揃えてheightを少しずつずらします。

上・下向き

#comment2{
	padding-bottom:10px;
	position:relative;
	top:15px;
	width:200px;
	margin:10px;
}
.bubble2{
    padding: 5px;
    text-align: left;
    border: 2px solid #576168;
	background-color:#1f2225;
	color:#ffffff;
}
.tail2 {	
	position:absolute;
	bottom:0;
	right:70px;
	height: 12px;
	width: 16px;
}
.tail2 span {
	display: block;
	background-color:#1f2225;
	border-left:2px solid #576168;
	border-right:2px solid #576168;
	font-size:0;
	height: 2px;
	line-height:0;
	margin:0;
	padding:0;
}
.tail2 .a1 { width: 9px;margin-left:1px;}
.tail2 .a2 { width: 7px;margin-left:3px;}
.tail2 .a3 { width: 5px;margin-left:5px;}
.tail2 .a4 { width: 3px;margin-left:7px;}
.tail2 .a5 { width: 1px;margin-left:9px;}
.tail2 .a6 { background-color: #576168; border: 0; height: 2px;left:2px;width:2px;margin-left:11px;}

ブロック要素にしたspanを縦に並べて、marginとwidthで少しずつずらす。

この方法、位置とサイズ変えるだけでいいので全方向作れるし、サイズも幅広い。
（大きくすればその分spanが必要になるけど）
しっぽの向きも変えれるので自由度が高い反面、周りのＣＳＳに影響受けやすいので崩れることもあったりする。

※ちなみにJavascriptでspan要素作って挿入すればソースは汚れません。