▼EntryMore▼

まず、なぜ三角になるのか、というのを説明したいと思います。
border プロパティは、上下左右、個別に設定することができます。
普通は下だけだったり、全体だったりに使用しますし、あまりに太い設定にはしないと思います。n

太い設定にして、上下左右とも色を変えてみるとなぜ三角になるのか、が分かりやすいと思いますので、以下にサンプルを表示します。n

さて、感のいい方なら分かったと思います。
三角の頂点をどちらに向かせたいか、によって設定するプロパティは異なりますが、今回のデモと同じで話を進めたいと思います。（つまり、下に頂点が来る三角（▼）を作っていきます）n

ではまず、上記のサンプルを上辺だけにしてみましょう。n

さて、だんだん三角形が見えてきましたね。
上のサンプルのポイントは、border-left, border-right の色を透明（transparent）にし、太さを設定しているところです。
これがないと、上の border はただの太い直線になってしまいます。
（※IE6では border に対して transparent が指定できないので、別途背景と同じ色（例えば白とか）を指定してやる必要があります）n

さて、あとは両端の斜めの部分をくっつけてやれば無事、三角形になります。
といっても大したことはしません。
横に長くなるのは横幅があるためなので、単純に width を 0 にしてやります。n

これで無事、三角形ができました。
ただ、このままではちょっとサイズが大きすぎるので、実際に使う場合は border の太さを調整して使ってください。n

ちなみに border-top(border-bottom) が三角の高さを、左右の幅が傾斜を決めます。
また、サンプルの場合左が垂直な三角になっていますが、左の border の値を 0 にすることで傾斜をなくすことができます。n

このあたりの形については、自分の好みの形になるように微調整してみてください。
三角形が作れたら、あとはそれを position: absolute で位置指定して、噴出しに見えるように配置すれば完成です。n

さらにデモでは吹き出しに対して枠がついているように作っていますが、作り方は単純で三角形になる要素を入れ子にして、中の三角の色を吹き出しの背景の色と同じにすることでまるで枠がついているように見える、というわけです。n

以下に、デモの CSS ソースを表示します。
吹き出しの肝は、「. tooltipAngle と . tooltipAngleInner」の部分です。
ツールチップとしての表示に関しては以前にエントリーを書いているのでそちらを参考にしてください。
»ツールチップ（ポップアップヘルプ）を改良してみた。

※ webkit 系のブラウザである Google Chrome と Safari では、さらにフェードインなどのアニメーションも指定してあるので、そちらのブラウザでも一度見てみてください。
CSS だけでここまでできるのか！　と思えると思います(*'-')

CSS ソース

HTML ソース