リキッドデザインって難しそう

CSSでバブルタイプのblockquote『Bubble Quote』を作りました。
幅固定ならもう少しなんかアレな感じでできるんじゃないかなーとか思った。
ということで適当にやってみた。

blockquote.bubblequote{
  padding:20px 0 0;
  width:240px;
  background-image:url("img/quote_top.png");
  background-repeat:no-repeat;
  background-position:0 0;
}
blockquote.bubblequote p{
  margin:0;
  padding:0 1em 1em;
  color:#333;
  background-color:#ccc;
}
blockquote.bubblequote .bubblequotefoot{
  margin:0;
  padding:0 1em 40px;
  background-image:url("img/quote_arrow.png");
  background-repeat:no-repeat;
  background-position:20% 100%;
}

<blockquote class="bubblequote">
<p>CSSバブルクオートでポップデザイン＊CSSバブルクオートでポップデザイン＊</p>
<p>CSSバブルクオートでポップデザイン＊CSSバブルクオートでポップデザイン＊</p>
<p class="bubblequotefoot">CSSバブルクオートでポップデザイン＊CSSバブルクオートでポップデザイン＊</p>
</blockquote>

デモ

IEとOperaで確認したけどFirefoxでは確認してない。IE5とかは知らない。
あとciteとかはしょった。めんどいので。
blockquoteをdivに変えても使えるかもしれないけど、正直これ用途がわかんない＞＜

ていうかペイントしかお絵かきツールないから、画像いじるのめんどい。ていうか全然かわいくなくなった。

追記

よく読んでなかった。幅変えられるからいっぱいdivdivしてるんですね。ごめんなさい。
てかすごくむなしくなった。固定幅だったら簡単にできるし。意味ない。
可変幅で角丸くするのはむずかしい！擬似要素と擬似クラス使えるとか、いくつか繰り返されるとか使う場所が決まってるとか、あるいはある程度中身があるならともかく、どこででも使えるようにして少ない要素でうまくやるのは厳しい。つかワカンネ。
この「CSSでバブルタイプの〜」は謎なidをよさげなclassにして中のdivをblockquoteにしてアレとかアレすれば相対的な幅指定に使えそうな感じがするんだけど、紹介されたまま使っちゃう人がいたら少しアレですねアレ。なんていうかごめんなさい。
HTML難しいな！