角丸と吹き出し

CSSのみで角丸の吹き出しを描く方法です。

角丸の描き方

CSS3の border-radius を使って描きます。
ですが、border-radiusはIE9/Opera10.50以降からしか対応していないので、各ブラウザ用に記述します。

.corner {
 -moz-border-radius: 5px;     /* Firefox */
 -webkit-border-radius: 5px;  /* Chrome, Safari */
 -khtml-border-radius: 5px;   /* 旧Safari */
 border-radius: 5px;          /* CSS3 */
}

吹き出しの描き方

CSSのbefore/after擬似要素を使います。
CSS3からはコロン2つ（::before）書かないといけないようですが、IE8でうまく動かないので、CSS2の書き方「コロン1つ」で記述します。

.post:after, .post:before {
 right: 100%;
 border: solid transparent;
 content: " ";
 height: 0;
 width: 0;
 position: absolute;
}

.post:after {
 border-right-color: #ffffff;
 border-width: 8px;
 top: 50%;
 margin-top: -8px;
}

.post:before {
 border-right-color: #93B3BF;
 border-width: 9px;
 top: 50%;
 margin-top: -9px;
}

参考：
CSS3 角丸を表現する border-radius

[CSS]画像無しで三角形を作成する仕組みとそれを応用するチュートリアル