株式会社プロネット

 

WEBシステム開発、ITコンサルティング、自社サービス、教育事業 - これからのビジネスへのIT活用ソリューションをご提案致します。

【CSS】CSSだけで三角形を描画する

2015.7.9(Thu) 22:27 | CSS | sofuku

小ネタですが。

CSSでborderをうまく使うと、画像を使わずとも三角形が描画できます。

 

環境

IE6~11

Chrome

FireFox

Safari

 

CSSの内容

 

.triangle-b{
    width: 0;
    height: 0;
    border: 80px solid transparent;
    border-top: 80px solid red;
}

widthとheightが0のブロック要素にborderを指定して、borderを透過します。

そのあとに、border-topにのみ色を指定すると

tr-b.png

こんな感じの三角形が表示されます。

 

上向きは逆にborder-bottomを指定してあげればOKです。

.triangle-t{
    width: 0;
    height: 0;
    border: 80px solid transparent;
    border-bottom: 80px solid blue;
}

tri-t.png

 

横幅をスリムにしたい時は、左右のborderを指定します。

.triangle-s{
    width: 0;
    height: 0;
    border-top: 80px solid transparent;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 80px solid orange;
}

tri-s.png

他にもCSSで三角形を作る方法はありますが、この方法のメリットは比較的古いブラウザにも対応しているところです。

以上です。