Google Map 用の吹き出しを作ったときに画像を使ったんだけど CSS だけでも吹き出しが作れるみたい。

三角形の所はどうすんだろうと思ったら世の中には頭の良い人が いるもんで太い border の片側を透明にする事で実現していた。

こーいうのをコロンブスの卵って言うんだろうな。

参考サイトはこの辺、他多数。

  • http://terkel.jp/archives/2009/12/css-only-speech-bubbles/

さっそく試してみる。
左右の吹き出しの例が多いんだけど汎用性を考えて真中も有りにした。

吹き出し
データだよーん

大きさは内部データのサイズに追従する。 髭の部分も任意に伸ばせる。

吹き出し
データ
だよーん だよーん だよーん だよーん

ちょっといじると三角形を片側にして左右吹き出しにもできる。

左から吹き出し

右から吹き出し

CSS3 を使って影やらグラデーションやらで装飾したので下手に画像を 用意するより見栄えが良くなってしまった。

ま、やっぱり IE7 じゃ動かないんだけどね :-P

ソース:

<style> .Balloon { display: inline-block; color: black; font-style: bold; } .Balloon > span { display: inline-block; position: relative; top: -0px; left: -8px; border-bottom: 8px solid transparent; width: 50%; border-left: none; border-right: 8px solid #d0d0d0; } .Balloon > span + span { width: 0%; border-left: 8px solid #c8c8c8; border-right: none; } .Balloon > div { display: inline-block; border: 1px outset #fff; padding: 4px; background-image: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#d0d0d0)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(top, #f0f0f0, #d0d0d0 ); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient(top, #f0f0f0, #d0d0d0 ); /* FF3.6 */ background-image: -ms-linear-gradient(top, #f0f0f0, #d0d0d0 ); /* IE10 */ background-image: -o-linear-gradient(top, #f0f0f0, #d0d0d0 ); /* Opera 11.10+ */ background-image: linear-gradient(top, , #d0d0d0 ); -webkit-border-radius: 8px; -khtml-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -moz-box-shadow: 1px 1px 3px rgba(0,0,0,.3) ; -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,.3) ; box-shadow: 1px 1px 3px rgba(0,0,0,.3) ; } .Long> .Balloon > span { border-bottom: 32px solid transparent; } .Right> .Balloon > span { width: 75%; border-bottom: 12px solid transparent; border-right: 12px solid #d0d0d0; } .Right> .Balloon > span+span { display: none; } .Left> .Balloon > span { width: 25%; border-bottom: 12px solid transparent; border-right: 0px solid #d0d0d0; } .Left> .Balloon > span+span { border-left: 12px solid #d0d0d0; } </style> <div class="Balloon"><div> 吹き出し<br/>データだよーん </div><br/><span></span><span></span></div> <div class="Long"> <div class="Balloon"><div> 吹き出し<br/>データ<br/>だよーん だよーん だよーん だよーん </div><br/><span></span><span></span></div> </div> <span class="Left"> <div class="Balloon"><div> 左から吹き出し </div><br/><span></span><span></span></div> </span> <span class="Right"> <div class="Balloon"><div> 右から吹き出し </div><br/><span></span><span></span></div> </span>