そんな疑問にお答えします。
コーディングで三角形をサクッと作るにはジェネレーターを使うのが一番簡単です。
ジェネレーターは探せばいろいろ見つかります。
たとえば以下のようなものです。
これらを使えばすぐに三角形は作れます。
でもコードの中身を理解しないまま使っている方も中にはいると思います。
そういう僕も最初はわからないまま使っていました。
でもやはり「なぜこう書けばこう表示できるのか」という仕組みは最低限知っておく必要があります。
今回はその仕組みを解説します。
三角形の作り方
三角形を作るにはborderを使います。
まずはコードを見てみましょう。
HTML
<div class="triangle-top"></div>
<div class="triangle-right"></div>
<div class="triangle-bottom"></div>
<div class="triangle-left"></div>上から順番に上向き、右向き、下向き、左向きとなっています。
CSS
/* 上向き */
.triangle-top {
width: 0;
height: 0;
border-right: 30px solid transparent;
border-bottom: 30px solid #000;
border-left: 30px solid transparent;
}
/* 右向き */
.triangle-right {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid #000;
}
/* 下向き */
.triangle-bottom {
width: 0;
height: 0;
border-top: 30px solid #000;
border-right: 30px solid transparent;
border-left: 30px solid transparent;
}
/* 左向き */
.triangle-left {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-right: 30px solid #000;
border-bottom: 30px solid transparent;
}上記のCSSを記述すると以下のとおりになります。
ではなぜborderを指定すれば三角形になるのか？
その仕組みを見ていきましょう。。
三角形になる仕組み
まず上下左右の全方向にborderを指定してみます。
すると以下のようになります。
See the Pen
triangle1 by toshi (@toshi78)
on CodePen.
ここで注目すべきはおのおののborderのつなぎ目です。
斜めに切れているのがわかります。
これはborderの特性です。
そしてこれこそが三角形を作っているものの正体となります。
これがどういうことかは、ここからwidthとheightをなくすとはっきりします。
See the Pen
triangle2 by toshi (@toshi78)
on CodePen.
このように三角形が4つできます。
あとは使いたい部分以外の３つを透明にすれば三角形が出来上がるというわけです。
たとえば
.triangle {
width: 0;
height: 0;
border-top: 70px solid #00CC99;
border-left: 70px solid #ffb6c1;
border-right: 70px solid #ffd700;
border-bottom: 70px solid #87cefa;
}このコードだと4つの三角形です。
ここから上向きの三角形を作りたいとします。
その場合、一番下のborderのみを表示したいので「border-bottom」に対して色をかけます。
そしてそれ以外の部分を透明にします。
.triangle {
width: 0;
height: 0;
border-left: 70px solid transparent; /* 透明 */
border-right: 70px solid transparent; /* 透明 */
border-bottom: 70px solid #87cefa;
}
「border-bottom」に色を指定する場合は「border-top」への指定は省くことができます。
同様に「border-left」に指定する場合は「border-right」への指定は省くことができます。
このように色を指定する対角のborderへの指定は省略可能です。
また上で書いたコードはこのようにも書けます。
.triangle {
width: 0;
height: 0;
border: 70px solid;
border-color: transparent transparent #87cefa transparent;
}「border-color」プロパティは上、右、下、左の順番でborderの色を指定できます。
このあたりの書き方の順番はpaddingなどと一緒ですね。
実際にいろんな指定で書いてみることで理解も深まると思います。
以上です。
投稿者 トシ
コメントを残す