CSSでborderを使わないで三角形を作る方法

こんにちは。テイクです。ホームページを作り続けて9年になります。

CSSで三角形を作る方法といえばborderを使う方法です。これは調べればたくさん情報がでてきます。

この記事ではCSSでborderを使わないで三角形を作る方法をお伝えします。
backgroudを使います。

完成イメージ

html

<div class="triangle"></div>

CSS

.triangle{
    width: 80px;
    height: 100px;
    background:
    linear-gradient(to bottom left, transparent 50%, red 51%) no-repeat top left/100% 50%,
    linear-gradient(to top left, transparent 50%, red 51%) no-repeat bottom left/100% 50%;
}

widthとheightを調整することで三角形のサイズも直感的に変更できます。

解説

backgroundではグラデーションを表現することができます。

.triangle1{
    width: 80px;
    height: 100px;
    background:
    linear-gradient(black,red)
}

向きを左下から～に変えます。

background:linear-gradient(to bottom left,black,red)

グラデーションの開始位置、終了位置をそれぞれ中央（50%）にします。どちらも50%にすると境目がガキガキになるので51%にしています。

background:linear-gradient(to bottom left,black 50%,red 51%)

この三角を上半分に詰めます。heightは変更していません。

background:linear-gradient(to bottom left,black 50%,red 51%) no-repeat top left/100% 50%

同じ要領で左上からのグラデーションを重ね掛けします。

background:
linear-gradient(to bottom left,black 50%,red 51%) no-repeat top left/100% 50%,
linear-gradient(to top left,gray,blue)

グラデーションの開始位置、終了位置をそれぞれ中央（50%）にします。

background:
linear-gradient(to bottom left,black 50%,red 51%) no-repeat top left/100% 50%,
linear-gradient(to top left,gray 50%,blue 51%)

この三角を下半分に詰めます。

background:
linear-gradient(to bottom left,black 50%,red 51%) no-repeat top left/100% 50%,linear-gradient(to top left,gray 50%,
blue 51%) no-repeat bottom left/100% 50%;

あとは色を変えれば完成です。
背景を透明にするにはtransparentを指定するとOKです。

まとめ

borderを使わず、backgroudで三角形を作ることができました。
width,heightに応じて形が変わるのでborderを使うパターンより様々な表現ができるかと思います。

今回は左向きの三角形でしたが、応用すれば向きの変更や直角三角形もできますね。

以上、CSSでborderを使わず三角形を作る方法でした。