【UI】三角形部分もきっちり枠線つきの吹き出しCSS

UI

花粉症でズルズルのわっくです。頭もまわらないので、今日はちょっとゆるめのエントリー。
吹き出しをCSSで作る。これをちゃんと漫画風にします。



よく見かけるアレ、吹き出しCSS

結構見かけるんですが、あれってべた塗りの同じ色で三角形部分もできているのがほとんどなんですよね。
なので、いわゆる漫画風の枠線だけの吹き出しを作ろうとすると、疑似要素(:after)で差し込んでる部分だけはどうしてもベタ塗りになっちゃう。

つまり、こういう感じ。
normal 【UI】三角形部分もきっちり枠線つきの吹き出しCSS

ちゃんとしたい!

ちゃんとしてみましょう。
ポイントは< span >を入れること。それで通常:afterで追加している三角形の上に重ねてずらします。

さ、やってみよ!

html

<div class="content">
<p>画像で作るスキルがないのなら、CSSで作ればいいじゃない</p>
<span class="overlay"></span>
</div>

css

div.content{
position:relative;
width:200px;
padding:0 5px;
border:1px solid #ccc;
border-radius:5px;
font-size:12px;
line-height:1.6em;
z-index:0;
}
/* 吹き出し三角形部分 */
div.content:after{
content:" ";
position: absolute;
top: 100%;
left: 10px; 
z-index:1;
width: 0;
height: 0;
border: 8px solid transparent;
border-top-color: #ccc;
}
/* 三角形の上に乗せる。一回り小さくする。 */
div.content span.overlay{
position:absolute;
top: 100%;
left: 11px; 
z-index:2;
width: 0;
height: 0;
border: 7px solid transparent;
border-top-color: #fff;
}


こんな感じになりましたけど~~。
キレイに抜けてます。
ただ三角形の位置は固定せざるを得ないので、ボックスがリキッドだった場合でも吹き出し位置は固定になっちゃいますけどね。

content 【UI】三角形部分もきっちり枠線つきの吹き出しCSS
さらに、色を変えて応用編もできますねッ。
content2 【UI】三角形部分もきっちり枠線つきの吹き出しCSS

では今日はこれにて!すたこらさー!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>