CSSだけで吹き出しを作る

twicliで文字カウンタ部分に使っている、画像を使わずにCSSのみで吹き出し作る方法です。
こういうの。

三角形の書き方

隣り合う二辺で色が異なるボーダーを駆使すると、直角三角形が描けます。順を追って説明すると、

下のように上と右で色が違うボーダーを指定すると、次のようになります。

<style>
#balloon-p1 {
	border-top: solid 9px red;
	border-right: solid 9px #99f;
	width: 10; height: 10; background-color: yellow;
}
</style>

<div id="balloon-p1"></div>

黄色部分が要素の本体、赤が上のボーダー、青が右のボーダーです。

要素のheightを0にすると、下のようになります。

さらにwidthも0に。

赤色部分を透明色にすれば、直角三角形ができます。

余分な色指定は外して、最終的にはこんな感じのソースに。

<style>
#balloon-p1 {
	border-top: solid 9px transparent;
	border-right: solid 9px #99f;
	width: 0; height: 0;
}
</style>

<div id="balloon-p1"></div>

並べて吹き出しにする

上の直角三角形(balloon-p1)のすぐ右隣に、左右反転した要素(balloon-p2)を float: left; で(隙間無く)並べると、吹き出し部分になります。

また、その下に中身を書くボックス(balloon-c)を配置します。背景色は吹き出しのボーダーと同色に。あとは位置を調整するために、全体をdiv要素(balloon)でくくっておきます。このdivの幅を適当に指定しないとIEでおかしなことになります。

これで以下のような結果が得られます（右側はわざと隙間を空けて配置した例）。

最終的には、以下のようなソースに。なおp1, p2のmargin, paddingは明示的に0にした方が良いかもしれません。

<style>
#balloon {
	position: absolute;
	/* width: 200px; */
}
#balloon-p1 {
	border-top: solid 9px transparent;
	border-right: solid 5px #99f;
	margin-left: 8px;  # 吹き出しの横方向の位置
	float: left;
	width: 0; height: 0;
}
#balloon-p2 {
	border-top: solid 9px transparent;
	border-left: solid 5px #99f;
	float: left;
	width: 0; height: 0;
}
#balloon-c {
	background-color: #99f;
	padding: 3px;
	clear: left;
}
</style>

<div id="balloon">
	<div id="balloon-p1"></div>
	<div id="balloon-p2"></div>
	<div id="balloon-c">ふきだし！</div>
</div>

応用 - CSSだけで「「

http://twitter.com/syou6162/statuses/1234975204 に応えて。
こんなのも描けます。ちょっと微妙？

<style>
body {
	background-color: #000;
}
#usagi {
	position: absolute;
}
#usamimi-p1 {
	border-bottom: solid 16px transparent;
	border-left: solid 9px white;
	margin-left: 9px;
	float: left;
	width: 0; height: 0;
}
#usamimi-p2 {
	border-bottom: solid 16px transparent;
	border-left: solid 9px white;
	margin-left: 8px;
	float: left;
	width: 0; height: 0;
}
#usagi-c {
	background-color: white;
	padding: 3px;
	clear: left;
}
</style>

<div id="usagi">
	<div id="usamimi-p1"></div>
	<div id="usamimi-p2"></div>
	<div id="usagi-c">・・</div>
</div>