下向きの吹き出し

blockquote#one {
width: 250px;
background: #e3e3e3;
padding: 25px;
position: relative;
}

#one .arrow { //吹き出し部分
width: 0;
height: 0;
line-height: 0;
border-top: 30px solid #e3e3e3;
border-left: 60px solid white;
border-right: 10px solid white;
position: absolute;
bottombottom: -30px;
rightright: 30px;
}

右向き
# blockquote#three {
width: 450px;
background: #e3e3e3;
padding: 25px;
position: relative;
}

#three .arrow { //吹き出し部分
width: 0;
height: 0;
line-height: 0;
border-bottom: 25px solid #e3e3e3;
border-right: 50px solid white;
position: absolute;
top: -24px;
left: 20px;
}



使い方としては、

<blockquote id="one">
<p>
最近、運動する機会がめっきり減ったせいで、
少しずつメタボってきたのだけれど、
なかなか運動する時間も無く、
かと言って食欲を抑えることも出来ず、
ますます不健康になりつつある。
</p>
<span class="arrow" />　　 <!-- ←吹き出し部分 -->
</blockquote>

アローを付けなければ普通のブロック表示なので、
BLOCKQUOTEにid付けずそのまま弄ってもいいかも。

　　みなさんはどう思いますか？