CSSだけで吹き出しを作ってみる 三角の作り方

HAPPY NEW YEAR!!


CSSで三角が作りたいなぁ…と。線を途中で曲げたかっただけなんですけどね。CSSのtransformを使って変形してもいいのですが、ブラウザによってグラフィックに差があるので実用が難しい。

そこでググってみるとborderを使ったトリックが紹介されていました。

Image-free CSS Tooltip Pointers - A Use for Polygonal CSS? | Filament Group, Inc., Boston, MA
http://www.filamentgroup.com/lab/image_free_css_tooltip_pointers_a_use_for_polygonal_css/


仕組みはborderで厚みを出し、border-colorでもって領域を分割しているそうです。最初、よくわからなかったのですが、かなり昔のことを思い出してみるとそういえば、最近ではかなりダサい見た目になるのであまり使われていませんがborderの角って三角になりますよね。

#sample0 {
border:10px;
border-color:#000 #444 #888 #AAA;
border-style:solid;
height:100px;
width:100px;
}


あとは厚み(width/height)をゼロにしてborder-colorを透過させれば三角に見えるっていうわけです。

#sample1 {
border:solid #000;
border-color:#000 transparent transparent;
border-width:30px 30px 0;
width:0;
}


実際に吹き出しとして利用する場合は:beforeや:afterを使って表現します。枠なしの場合は:beforeか:afterどちらかを使用。

#sample2 {
background-color:#e44175;
border-radius:8px;
position:relative;
}

#sample2:after {
border-color:#e44175 transparent transparent;
border-style:solid;
border-width:16px 16px 0;
bottom:-16px;
content:"";
display:block;
left:32px;
position:absolute;
width:0;
}



枠ありの場合は吹き出し部分にもう一枚の三角を重ねてずらすことによって枠とするようです(正しく書けばz-index要らないかも…。あとbottomの位置指定おかしいかも)。

#sample3 {
background-color:#fff;
border-color:#e44175;
border-radius:8px;
border-style:solid;
border-width:1px;
position:relative;
}

#sample3:before {
border-color:#fff transparent transparent;
border-style:solid;
border-width:16px 16px 0;
bottom:-15px;
content:"";
display:block;
left:32px;
position:absolute;
width:0;
z-index:1;
}

#sample3:after {
border-color:#e44175 transparent transparent;
border-style:solid;
border-width:16px 16px 0;
bottom:-16px;
content:"";
display:block;
left:32px;
position:absolute;
width:0;
}



■もともと作りたかったのはこんな感じで見出し用に使おうと思っていました
border-widthの場所を変更すれば向きを変えることも出来ますし、今回は3辺を使っていますが2辺でも作れます。将来的にはHTML5の図形描画と合わせて色々と進化していくんでしょうか。

以下のページではCSS3のグラデーションやborder-radiusを使った更に高度な吹き出しも紹介されています。

Demo- Pure CSS speech bubbles – Nicolas Gallagher

Demo: Pure CSS speech bubbles – Nicolas Gallagher
http://nicolasgallagher.com/pure-css-speech-bubbles/demo/

Trackback