画像を使わず、CSSで吹き出しを作る

画像を使わずCSSで表現する三角と吹き出しの作り方をまとめました。
以下の<div>にCSSを適用しています。
<!-- html --> <div class="sample"></div>
三角を作る
まずは三角の作り方から。
上向き
/* css */ .sample { border:30px solid transparent; border-bottom-color:#000; border-top-width:0; width:0; }
下向き
/* css */ .sample { border:30px solid transparent; border-top-color:#000; border-bottom-width:0; width:0; }
右向き
/* css */ .sample { border:30px solid transparent; border-left-color:#000; border-right-width:0; width:0; }
左向き
/* css */ .sample { border:30px solid transparent; border-right-color:#000; border-left-width:0; width:0; }
吹き出しを作る
:beforeや:afterを使って表現します。
枠のない吹き出しの場合は、:beforeと:afterのどちらかを使います。
上向き
sample
/* css */ .sample { background-color:#ccc; border-radius:5px; position:relative; } .sample:after { border:10px solid transparent; border-bottom-color:#ccc; border-top-width:0; top:-10px; content:""; display:block; left:30px; position:absolute; width:0; }
下向き
sample
/* css */ .sample { background-color:#ccc; border-radius:5px; position:relative; } .sample:after { border:10px solid transparent; border-top-color:#ccc; border-bottom-width:0; bottom:-10px; content:""; display:block; left:30px; position:absolute; width:0; }
右向き
sample
/* css */ .sample { background-color:#ccc; border-radius:5px; position:relative; } .sample:after { border:10px solid transparent; border-left-color:#ccc; border-right-width:0; right:-10px; content:""; display:block; top:30px; position:absolute; width:0; }
左向き
sample
/* css */ .sample { background-color:#ccc; border-radius:5px; position:relative; } .sample:after { border:10px solid transparent; border-right-color:#ccc; border-left-width:0; left:-10px; content:""; display:block; top:30px; position:absolute; width:0; }
枠付きの吹き出しを作る
枠のある吹き出しの場合は、三角を2枚重ねます。
上向き
sample
/* css */ .sample { background-color:#fff; border:1px solid #000; border-radius:5px; position:relative; } .sample:before { border:10px solid transparent; border-bottom-color:#fff; border-top-width:0; top:-9px; content:""; display:block; left:30px; position:absolute; width:0; z-index:1; } .sample:after { border:10px solid transparent; border-bottom-color:#000; border-top-width:0; top:-10px; content:""; display:block; left:30px; position:absolute; width:0; }
下向き
sample
/* css */ .sample { background-color:#fff; border:1px solid #000; border-radius:5px; position:relative; } .sample:before { border:10px solid transparent; border-top-color:#fff; border-bottom-width:0; bottom:-9px; content:""; display:block; left:30px; position:absolute; width:0; z-index:1; } .sample:after { border:10px solid transparent; border-top-color:#000; border-bottom-width:0; bottom:-10px; content:""; display:block; left:30px; position:absolute; width:0; }
右向き
sample
/* css */ .sample { background-color:#fff; border:1px solid #000; border-radius:5px; position:relative; } .sample:before { border:10px solid transparent; border-left-color:#fff; border-right-width:0; right:-9px; content:""; display:block; top:30px; position:absolute; width:0; z-index:1; } .sample:after { border:10px solid transparent; border-left-color:#000; border-right-width:0; right:-10px; content:""; display:block; top:30px; position:absolute; width:0; }
左向き
sample
/* css */ .sample { background-color:#fff; border:1px solid #000; border-radius:5px; position:relative; } .sample:before { border:10px solid transparent; border-right-color:#fff; border-left-width:0; left:-9px; content:""; display:block; top:30px; position:absolute; width:0; z-index:1; } .sample:after { border:10px solid transparent; border-right-color:#000; border-left-width:0; left:-10px; content:""; display:block; top:30px; position:absolute; width:0; }
参考サイト
下のボタンを押すと拍手送信&メッセージフォームが開きます。→WEB拍手お返事
Comment