CSSでborderプロパティを使わない三角形の作り方！

この記事では、CSSのみで三角形を作る方法を紹介していきます。
CSSで三角形を作るときはborderプロパティを使用するのが一般的ですが、サイズの指定方法などが少々ややこしく、もっと簡単にできないか？と思った人もいるかと思います。
この記事では、そのような人向けにborderプロパティを使わずに三角形を作る方法を解説します！

borderプロパティを使ったやり方は以下の記事で紹介しています。

今回は、要素の背景にグラデーションを使うことで三角形を作っていきます。
背景をグラデーションにするにはlinear-gradientプロパティを使いますね。
これはデフォルトでは上から下のグラデーションになりますが、以下のように終点を指定することで向きを変えることができます。(この場合はbottom leftに向かう、つまり右上から左下のグラデーションになります。)

 

このようにして向きを斜めにしたあとに、各色の後ろに50%を書きます。これは、グラデーションの開始位置、終了位置を指定していて、同じ値を指定することで境目が同じ位置になり、その場所まではグラデーションにならずに色がずっと続くことになります。
実際にプレビューを見たほうがわかりやすいと思うので、下のコードとプレビューをよく確認しましょう。

三角形の形が見えてきましたね！
ここで、一方の色を透明色にすることで、一番簡単な斜めの三角形を作ることができます。
大きさは、heightとwidthで直接変更できます！

これが三角形を作る基本的な仕組みになります！背景色の指定を使っているので、widthとheightが直接指定でき、可変であるところが嬉しいですね。
これを工夫することで、向きの違う三角形なども作ることができます！

横向きの三角形は、先程の基本の三角形を２つくっつけるような形で作成します。
といっても2つの要素を使うわけではなく、一つの要素の中で作ることができます！
少し複雑と思うかもしれませんが、一つ一つ確認しながらやっていきましょう！
※詳しい説明はいいからコードが知りたい！という方は飛ばして最後のコードを確認してください。


まずは、先程の基本の三角形を上半分の大きさになるように詰めます。
これは、backgroundの色以外の値も入力していくことで設定します。

そもそもbackgroundは背景のいろいろなプロパティを一括指定できるものになっていて、順に「背景色、背景画像、背景画像の繰り返し方法、背景画像のスクロール方法、背景画像の表示位置」、というように指定します。

今まではこのうちの背景色しか書かずに他がデフォルト状態になっていたというわけですね。
 

では早速やっていきましょう。
まず、表示位置を上半分のみにしたいので、top left/100% 50%と指定します。
これは、background-positionとbackground-sizeを組み合わせたものになっています。bockgroundでこれらを指定するときは「/」で区切ってこのように書きます。
意味は「左上寄せで、x座標を100%、y座標を50%」となります。

次に、このままでは半分になったグラデーションが2回繰り返されてしまいます。よって、繰り返さないためにno-repeatを指定しておきます。

これらをすべて含めると以下のようになります。

次に、これまでと同じ要領で下半分にも三角形を作成します。
上とくっつけたときに三角形になるようにしたいので、今度は右下から左上のグラデーションを作って三角形にすると良いでしょう。

これらの2つのグラデーションは、「,」で区切って一つのbackgroundプロパティの中に含めます。

完成形は以下のようになります！

向きを変えたいときは、上半分と下半分に分けていたところを左半分と右半分にしたり、グラデーションの向きを変えたりすることで実現できます！

正三角形にしたい場合は、底辺:高さが2:√3になるようにwidthとheightを指定します。

いかがでしたか？この方法を使えばborderを使わずに三角形を作ることができます！

以下の記事では、今回紹介した三角形の作り方を応用してギザギザの境界線を作る方法を紹介しています。