[CSS]:after擬似要素を使ってCSSだけで吹き出しを作る

吹き出しといえば「笑う」みたいな変な固定観念を持ちあわせています下山です。
今回は笑いながら記事を書きます。

:after擬似要素を使って吹き出しの作り方をまとめたンゴ。

まずはデモ

要はdivに擬似要素で三角を付けてpositionで位置指定するだけです。

CSSで三角形を作るには

と書くと「▲」が描けます。
これをある要素(divとか)に擬似要素(:after)として追加してあげれば吹き出しになります。

CSSで吹き出し(上)

html

CSS

CSSで吹き出し(下)

html

CSS

CSSで吹き出し(右)

html

CSS

CSSで吹き出し(左)

html

CSS

色、大きさ等は適当に変更して使ってください。

IE8以上、その他のブラウザで表示できる予定・・・

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク