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

画像を使わず、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拍手お返事