Pure CSSな吹き出し

Twitterで「CSSで吹き出し作るのブクマし忘れててどこにあったか忘れた……」とかつぶやいたらe_luckさんがImage-free CSS Tooltip Pointers - A Use for Polygonal CSS?を探してきてくれた。このエントリでは枠線をつけるために入れ子になっていたりちょっとわかりづらかったので、ものすごく単純化して解説してみようとかなんとか。 Pure CSSな吹き出しのサンプル: Speech Bubbles とりあえず、吹き出しの尻尾を左下に出すもの(サンプル内では4つめのサンプル)を例にして説明していく。HTMLコードは以下のようなもので、bubbleというクラス名を振ったdiv要素がコンテナ、bodyというクラス名を振ったp要素が吹き出しのベース、tailというクラス名を振った空のdiv要素が尻尾になる。 <div class="bubble

[chezou]

CSSで丸くなるんです。すごいんです。

[sotarok]

ふきだし

[youthart]

Pure CSSな吹き出し

[RoQo-4U]

cssで吹き出し

[tsukkee]

:after使うやつがよさげ

[secondlife]

吹き出しデザイン

[mackato]

[for:@twitter]

[www_taca]

画像を使わずにCSSだけで吹き出し

[wacky]

画像を使わずにCSSだけで吹き出し（三角形）を描画する方法の日本語解説。

[hiro_y]

CSSだけで吹き出し。

[ku_marin]

cssだけで吹き出しをつくる

[utaA]

CSSだけでふきだし

[Ctrans]

hail2u.net - Weblog - Pure CSSな吹き出し

[kits]

周りを囲むdivと吹き出し口になる空divが必要。元になった記事は Image-free なのになぜ Pure CSS なのだろう。

[lovely]

空div