このblogのついったを表示させてる部分はフキダシ風になってるけど
とても簡単なcssで出来てます。

([追記]
:before 擬似要素 / :after 擬似要素でつくる画像を使わないふきだしの作り方はこちら

こことか
twitter-1

こことか
twitter-2

以下その説明。

動作確認用ページと素材

まず仕組みから

こうゆうイメージで作るとして
完成イメージ

トンガリ部分は透過gifで作成しておく。
とんがり

トンガリ部分をどの要素に持ってくるかが問題になると思うけど、今回は下の部分(青いエリア)の背景に配置した。
html的を色分けするとこんな風に。
ブロック分け図、トンガリは下部分

例えば下の文章をふきだしにする場合

「にんげんだもの」が赤エリアで「320」が青エリア。

htmlはこんな風にdlでマークアップした。

cssで必要な記述はこんな感じ?
用意しておいた尖がり部分の画像を「320」の背景にして、positionを使ってマイナス方向にずらす。

動作確認用ページと素材


コメントを残す

メールアドレスが公開されることはありません。

You can add images to your comment by clicking here.