CSSで三角形を作ってみよう！

こんにちは。トミーです。

今回は「CSSで三角形を作る方法」について紹介します。
ウェブサイトでよく見る「▶︎」！リンクを飛ばす時によく見る「▶︎」！

小さいのでウェブサイトを閲覧する時は、そんなに意識したことがないと思いますが、コーデイングの時にやたらと目につきます。
お前、そこにもおるんかーい！みたいな所にいたりします（笑）

まぁ、画像で切り抜いて使用しても問題ないのですが、コーダーとしてはコードで解決したいものです。
ということで、三角形について見ていきましょう！

基本の三角形

CSSで三角形を作る時には「border」プロパティを使用します。
基本の三角形は下記のようになります。

<div class="triangle"></div>

.triangle{
	width: 0;
	height: 0;
	border-top: 60px solid #FF6B73;
	border-right: 60px solid transparent;
	border-bottom: 60px solid transparent;
	border-left: 60px solid transparent;
}

三角形の作り方

1. border-topで横に一本線を引きます。

   width: 100px;
   height: 100px;
   border-top: 10px solid #FF6B73;

2. border-rightで縦に一本線を引きます。

   width: 100px;
   height: 100px;
   border-top: 10px solid #FF6B73;
   border-right: 10px solid #ffd152;

3. border-bottomで横に一本線を引きます。

   width: 100px;
   height: 100px;
   border-top: 10px solid #FF6B73;
   border-right: 10px solid #ffd152;
   border-bottom: 10px solid #9adb35;

4. border-leftで縦に一本線を引きます。

   width: 100px;
   height: 100px;
   border-top: 10px solid #FF6B73;
   border-right: 10px solid #ffd152;
   border-bottom: 10px solid #9adb35;
   border-left: 10px solid #4edae1;

5. widthとheightを「0」にします。

   width: 0;
   height: 0;
   border-top: 10px solid #FF6B73;
   border-right: 10px solid #ffd152;
   border-bottom: 10px solid #9adb35;
   border-left: 10px solid #4edae1;

6. サイズが小さくなってしまうので、borderのサイズを調整します。

   width: 0;
   height: 0;
   border-top: 60px solid #FF6B73;
   border-right: 60px solid #ffd152;
   border-bottom: 60px solid #9adb35;
   border-left: 60px solid #4edae1;

7. あとは不要な部分を透明にすれば完成です！

   width: 0;
   height: 0;
   border-top: 60px solid #FF6B73;
   border-right: 60px solid transparent;
   border-bottom: 60px solid transparent;
   border-left: 60px solid transparent;

三角形の向きについて

三角形の向きについては、どこを透明にするかで変えることができます。
すぐにコピペで使えるように、三角の向きによってのコードを記載しておきます。

下向き三角 ▼

width: 0;
height: 0;
border-top: 60px solid #FF6B73;
border-right: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid transparent;

左向き三角 ◀︎

width: 0;
height: 0;
border-top: 60px solid transparent;
border-right: 60px solid #FFD152;
border-bottom: 60px solid transparent;
border-left: 60px solid transparent;

上向き三角 ▲

width: 0;
height: 0;
border-top: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 60px solid #9adb35;
border-left: 60px solid transparent;

右向き三角 ▶︎

width: 0;
height: 0;
border-top: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid #4edae1;

まとめ

え！実は四角だったんだ！と驚きですよね。
三角形の向きについては、ひとつ覚えたら後は応用なので簡単ですね♪