画像を使わず、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