border を使って三角形を作る

0
584
views

CSS には標準の機能として三角形を描画する機能はありません。しかし CSS3 の border の機能を使えば、疑似的に三角形を再現することができます。

CSS で三角形を作る2つの方法

CSS3 の三角形の描写には、border を使った方法と taransform:rotate を使った方法の2種類の方法があります。今回は border を使って三角形を再現します。

transform:rotate と clip で三角形を作る
http://snagimo.com/made-triangle-by-transform-rotate

四角の中に4つの三角を作る

html

CSS

.four-triangle-in-one-square {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-bottom: 100px solid yellow;
    border-left: 100px solid blue;
    border-right: 100px solid black;
}

実行結果

1つの三角に改変する

html

CSS

.four-triangle-in-one-square {
    width: 0;
    height: 0;
    border-top: 100px solid transparent;
    border-bottom: 100px solid transparent;
    border-left: 100px solid blue;
    border-right: 100px solid transparent;
}

実行結果