吹き出し画像をbackground-imageにするんじゃなくて、cssだけで作るのが今風。
このcssで吹き出しを作るのに便利なツールがcss arrow please!。
これで作ったcssを使って、htmlには
<div class=”arrow_box”>text</div>
みたいに書くだけ。
カスタマイズ方法
・吹き出しの位置を左に持ってくるならleft: 50%;を10%ぐらいに。
・吹き出しを丸くするなら、.arrow_boxに
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
とか追加。
・吹き出しの上に余白をけるなら、.arrow_boxにmargin-top:5px;とか追加して、.arrow_box:afterを
border-width: 15px;
margin-left: -15px;
.arrow_box:beforeを
border-width: 16px;
margin-left: -16px;
ぐらいに変更。
1pxずらすのがポイント。
・吹き出しにシャドウをつけたいときは.arrow_boxに
box-shadow:rgba(170, 170, 170, 0.5) 0px 1px 2px 2px;
-webkit-box-shadow:rgba(170, 170, 170, 0.5) 0px 1px 2px 2px;
-moz-box-shadow:rgba(170, 170, 170, 0.5) 0px 1px 2px 2px;
を追加。