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

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;
透明の書き方には下記二種類があります
  • transparent
  • rgba(255,255,255,0)

三角形の向きについて

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

下向き三角 ▼

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;

まとめ

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

タイトルとURLをコピーしました