グラデーションの三角形を作る

2021年1月4日

制作の手順

仕上がりイメージ

グラデーションの三角形を作る手順は以下のとおりです。

  • 正方形を作る
  • 45度回転させたグラデーション背景を設定する
  • 正方形を回転させる

正方形を作る

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

CSS

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

45度回転させたグラデーション背景を設定する

背景を45度回転させたグラデーションを作成するには、backgroundを以下のように書き換えます。

CSS

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

正方形を回転させる

正方形をtransform:rotate(45deg)で45度回転させると、右向きの三角形ができます。

CSS

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

できあがったもの

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

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