(縁取りのある)ふきだしの尖がってる部分の作り方

  • このエントリーをはてなブックマークに追加
  • LINEで送る

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

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

こことか
twitter-1

こことか
twitter-2

以下その説明。

動作確認用ページと素材

まず仕組みから

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

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

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

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

にんげんだもの - 320

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

htmlはこんな風にdlでマークアップした。
[html]
<dl>
<dd><p>にんげんだもの</p></dd>
<dt>320</dt>
</dl>
[/html]

cssで必要な記述はこんな感じ?
用意しておいた尖がり部分の画像を「320」の背景にして、positionを使ってマイナス方向にずらす。
[css]
*{
padding:0;
margin:0;
}
dd{
background:#d8d8d8;/*背景色*/
border:2px solid #808080;/*線の色*/
}
dt{
position:relative;
top:-2px;/*ddのborder分、今回は線幅2で作ったので-2px上へ*/
background:url(トンガリ画像.gif) no-repeat;
padding-top:1em;
}
[/css]

動作確認用ページと素材

  • このエントリーをはてなブックマークに追加
  • LINEで送る

SNSでもご購読できます。

コメントを残す


You can add images to your comment by clicking here.