CSSで三角形や台形を表現する

こんばんは。きわさです。

今回は、CSSで三角形や台形を表現する方法についてです。
HTMLをデザインする際、三角形や台形のような形にしたいことがたまにあります。
そんなときに役に立つのがborderです。

borderと言えば、下記のように枠線のイメージが強いかと思います。

この例では100pxの正方形に1pxの黒い枠線をつけています。

<div id="test1"></div>

#test1 {
width: 100px;
height: 100px;
border: 1px solid #000000;
}

このborderですが、下記のように上下左右の辺ごとに設定もできます。

#test2 {
width: 100px;
height: 100px;
border-top: 1px solid #000000;
border-bottom: 1px solid #ff0000;
border-left: 1px solid #00ff00;
border-right: 1px solid #0000ff;
}

さらにborderの太さを変えてみます。

#test3 {
width: 100px;
height: 100px;
border-top: 30px solid #000000;
border-bottom: 30px solid #ff0000;
border-left: 30px solid #00ff00;
border-right: 30px solid #0000ff;
}

どうでしょうか。各辺が台形のように見えてきますね。
ここで左右と上のborderを透明にしてみます。

#test4 {
width: 100px;
height: 100px;
border-top: 30px solid transparent;
border-bottom: 30px solid #ff0000;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
}

台形です。
border-bottomの太さが台形の高さ、widthが台形の上底の長さになっています。

あとは無駄なスペースを消すためにheightを0にします。
また、台形の中に文字を入れることもできます。

<div id="test5">test</div>

#test5 {
width: 100px;
height: 0px;
border-top: 30px solid transparent;
border-bottom: 30px solid #ff0000;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
text-align: center;
}

そして、widthが上底の長さになっているということは、
widthも0にしてやれば三角形になります。

<div id="test6"></div>

#test6 {
width: 0px;
height: 0px;
border-top: 30px solid transparent;
border-bottom: 30px solid #ff0000;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
}

borderの左右上下の組み合わせを変えれば、向きも変えられます。

<div id="test7"></div>
<div id="test8"></div>

#test7 {
width: 0px;
height: 0px;
border-top: 30px solid transparent;
border-bottom: 30px solid #ff0000;
border-right: 30px solid transparent;
}
#test8 {
width: 0px;
height: 0px;
border-top: 30px solid #000000;
border-bottom: 30px solid transparent;
border-left: 30px solid transparent;
}

このように、borderで三角形や台形を表現することができます。