CSSで三角形を作成する方法（基礎編）【ジェット・コーディング】

コーディング部ログ

CSSで三角形を作成する方法（基礎編）2021.08.14

今回はCSSのborderプロパティで三角形を作成する方法についてご紹介します。

色違いの三角形を複数用意したい場合、画像ならそれぞれ用意する必要がありますが、
CSSで作成すればカラーを変更するだけです。

効率的なコーディングをするためにも、ぜひCSSで三角形を作成する方法をマスターしましょう！

CSSで三角形を作成する方法

以下が、実際にCSSで作成した三角形です。
コードを合わせて掲載します。

See the Pen CSSで三角形を作成する方法 by Hiro (@moref) on CodePen.

.triangle1 {
  border-right: 50px solid transparent;
  border-bottom: 86.6px solid #5F939A;
  border-left: 50px solid transparent;
}

冒頭でお伝えした通り、CSSのborderプロパティのみで三角形を作成することができました。
上向きの三角形にしたい場合は、上記の通り、border-bottomのみ色を指定してみて下さい！

CSSのborderで三角形ができる仕組み

それでは、CSSのborderで三角形ができる仕組みについて解説していきます。
まずは、四方のボーダーが色違いの四角形を作成してみてください。

.triangle2 {
  display: block;
  width: 100px;
  height: 100px;
  border-top: 50px solid #5F939A;
  border-right: 50px solid #A0937D;
  border-bottom: 50px solid #3A6351;
  border-left: 50px solid #F2EDD7;
}

次にwidthとheightを0にします。

.triangle3 {
  display: block;
  width: 0;
  height: 0;
  border-top: 50px solid #5F939A;
  border-right: 50px solid #A0937D;
  border-bottom: 50px solid #3A6351;
  border-left: 50px solid #F2EDD7;
}

中の要素がない場合、四方のborderが三角形になります。

最後に、不要な部分をtransparentで透明にすることで、三角形の図形が出来上がります。

.triangle4 {
  display: block;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid #3A6351;
  border-left: 50px solid transparent;
}

ちなみに、以下のようにすると、右下向きの三角形を作成できます。

.triangle5 {
  display: block;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid #3A6351;
  border-left: 50px solid #F2EDD7;
}

CSSで三角形を作成する場面は意外と多いです。
今回の記事が参考になれば嬉しいです。