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

CSSで三角形を作るときはborderプロパティを使用するのが一般的ですが少々ややこしく、使わないでできないか?と思った人もいるかと思います。
そこでこの記事では、CSSでborderプロパティを使わない三角形の作り方を解説します!

コンテンツ [表示]

  1. 1CSSでborderプロパティを使わない三角形の作り方
  2. 1.1borderを使わずに三角形を作る仕組み
  3. 1.2横向きの三角形の作り方
  4. 2まとめ

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

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

あわせて読みたい
CSSで三角形を作る方法をご紹介!のイメージ
CSSで三角形を作る方法をご紹介!
この記事では、CSSのborderを使ってCSSのみで三角形を作る方法を紹介します。 枠線を引くときに使うborderプロパティを利用して三角形を作ります。複数のパターンの三角形についてサンプルコードも用意しているので是非試してみてください!

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

borderを使わずに三角形を作る仕組み

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

 

linear-gradient

background: linear-gradient(to bottom left, lightblue, pink)

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

50%を指定

background: linear-gradient(to bottom left, lightblue 50% , pink 50%) ;

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

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

横向きの三角形の作り方

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


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

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

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

デフォルトではこのようになっている

background: transparent none repeat scroll 0% 0%

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

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

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

上半分に詰めたあと

background: linear-gradient(to bottom left, transparent 50% , pink 50%) no-repeat top left / 100% 50%;

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

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

下半分の三角形

linear-gradient(to top left,transparent 50%,pink 50%) no-repeat bottom left/100% 50%;

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

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

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

まとめ

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

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

あわせて読みたい
CSSでギザギザな境界線を作る方法を解説!のイメージ
CSSでギザギザな境界線を作る方法を解説!
cssでギザギザな境界線を作る方法をサンプルコード付きで解説します。コードの意味を理解できなくてもコピペして、必要に応じてアレンジすることでギザギザな境界線を扱えるようになります。また関係するcssのプロパティの扱いを覚えましょう。
今だけ
無料

【7月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

まゆ
ライター

まゆ

 主にHTML,Bootstrapの記事を描いています。