ブロック要素を吹き出し風にする

ブロック要素に吹き出し風の三角を指定した位置に付ける方法について紹介します。

HTML

補足

• ブロック要素に吹き出しの位置を指定するクラス（ balloon-bottom-right など）を付けます（このサンプルでは span 要素をブロック化しています）。

CSS

補足

• 右下、左下、上、下、左、右用の吹き出しを定義しています。
• 吹き出しの三角の部分は after 擬似要素で表示しています。

サンプル

「ブロック要素を吹き出し風にする」のサンプル