疑似要素を使ってCSSのみで三角形をつくる方法 - nicepaper @ ウィキ

目次

CSSを使用して簡単に三角形を作ってみよう

CSSを使用して簡単に画像を使わずに矢印を表現できます。
文章の先頭にちょこっと右矢印をのせておくとより見栄えが良くなりますよね。
完成形はこのような矢印になります。

色や大きさなども自在に操ることができます。
それでは解説をしていきますね。

まずは一見関係ないように思えるかもしれませんが、高さと横が０のボックスに対してボーダーの長さを指定したらどうなるでしょうか？
例えば、
HTML

<div id="box1"></div>

CSS

#box1 {
height: 0px;
width: 0px;
border: 20px solid #000;
}

とすると、

というように真黒な四角があらわれます。
これはborderそのものに太さが存在するからですね。この場合、四角の一片の長さは40pxと言えるでしょう。

ではborderの中でもleftしか指定しなかったらどうでしょうか？？
CSSを

#box1 {
heigth:0px;
width: 0px;
border-left:20px solid #000;
}

と書き換えます。
今度は何もあらわれなくなってしまいます。

次の図を見てください。

高さと横がそれぞれ０の四角形のborderが意味する領域はそれぞれ三角形となります。
ここは言葉で説明するのはとても難しいですが、

#box1 {
height: 0px;
width: 0px;
border-top: solid transparent;
border-right: solid transparent;
border-bottom: solid transparent;
border-left: 20px solid #0f0; 
} 

とすると完成形となります。
これは確かに四角形として存在しているものの、transparentによって一旦四角形が透明になり、その後、改めてborder-leftのみを指定して色をつけた状態 なのです。
上の四角形の中に三角形がつめられている図の通りの関係となっており、それぞれ

右矢印　border-left(他はtransparent) 
左矢印　border-right(他はtransparent)
上矢印　border-bottom(他はtransparent)
下矢印　border-top(他はtransparent)

という関係になっています。