はじめに

CSSのみでグラデーションの三角形を作る手順を紹介します。

仕上がりイメージ

目次

正方形を作る

まずはベースとなる正方形を作ります。

今回は60×60ピクセルの正方形を作ってみました。

HTML

<p class="test01"></p>

CSS

.test01 {
　width: 60px;
　height: 60px;
　background: #ccc;
}

できあがったもの

ひとまず背景を単色background: #ccc;で設定しましたが、背景色はグラデーションに変更します。

斜め方向のグラデーション背景を設定する

背景色を斜め方向のグラデーションにするには、backgroundの箇所を以下のように書き換えます。

HTMLは変更無いため割愛します。

CSS

.test01 {
　width: 60px;
　height: 60px;
　background: linear-gradient(45deg, transparent 50%, #ffffff 50%, #cccccc);
}

できあがったもの

transparent 50%で正方形の前半50％を透明にして、後半50％で白からグレーのグラデーションを作成しています。

正方形を回転させる

上記で作成した正方形をtransform:rotate(45deg)で45度回転させると、右向きの三角形になります。

HTMLは変更無いため割愛します。

CSS

.test01 {
　width: 60px;
　height: 60px;
　background: linear-gradient(45deg, transparent 50%, #ffffff 50%, #cccccc);
　transform:rotate(45deg);
}

できあがったもの

これで完成です。

transform:rotate(**deg);の数値を調整すれば、上下左右向きのグラデーション背景の三角形を作ることができます。

CSS

.test01 {
　width: 60px;
　height: 60px;
　background: linear-gradient(45deg, transparent 50%, #ffffff 50%, #cccccc);
　transform:rotate(45deg);
}
.test02 {
　width: 60px;
　height: 60px;
　background: linear-gradient(45deg, transparent 50%, #ffffff 50%, #cccccc);
　transform:rotate(135deg);
}
.test03 {
　width: 60px;
　height: 60px;
　background: linear-gradient(45deg, transparent 50%, #ffffff 50%, #cccccc);
　transform:rotate(225deg);
}
.test04 {
　width: 60px;
　height: 60px;
　background: linear-gradient(45deg, transparent 50%, #ffffff 50%, #cccccc);
　transform:rotate(315deg);
}

できあがったもの

ただし、この方法では正三角形しか作れません。

余談ですが、単色塗りの三角形を作りたい時、CSS三角形作成ツールを私はよく利用しています。