CSSを用いて三角形を作る手順を紹介していきます!
border要素で作る三角形は考え方が難しいです。
ですが、しっかりと1つ1つ理解しながら作成していきましょう。
【CSS】borderで三角形を作ろう!
まずはborder要素の復習からです。
borderを枠線として使用する場合、以下のような形になります。
1 |
<div class="content">中身です</div> |
1 2 3 4 5 6 |
.content{ font-size:2rem; border-style:solid; border-color:#E0FF00 #ffffff #073795 #000000; border-width:1px 1px 1px 1px; } |
色は分かりやすいように、「上右下左」の順に「黄白青黒」としています。
border-colorの指定の順番も「上右下左」なので、
この順番で適用されていくのは覚えておきましょう。
さて、このborderですが、幅を広げると面白いことが起こります。
「border-width」を「5rem」くらいにしてみましょう。
それぞれのborderの境目が斜めに入っていることが分かりますね。
さらにここで中身をなくしてみます。
すると、さらに面白いことになります。
この状態でdivの幅を0にしてみましょう。
1 2 3 4 5 6 7 |
.content{ margin-left:20px; width:0; /* 幅を0に */ border-style:solid; border-color:#E0FF00 #ffffff #073795 #000000; border-width:5rem 5rem 5rem 5rem; } |
すると要素がborderだけになり、4つの三角形で出来た四角形ができます。
次はborder-widthを弄ってみましょう。
以下のように幅を変更します。
1 2 3 4 5 6 7 |
.content{ margin-left:20px; width:0; border-style:solid; border-color:#E0FF00 #ffffff #073795 #000000; border-width:5rem 7rem 10rem 13rem; /* 線の幅を太く */ } |
すると以下のように表示が変更されます。
これは次のように形が決まっています。
指定した幅によって、集まる部分が変わります。
さらに
- 長方形の横の幅が「左右」の線の幅の合計で決まる
- 縦の幅は「上下」の線の幅の合計で決まる
ことも分かります。
これではまだ四角形なので、ここから三角形にします。
三角形にするのは簡単で、
例えば下向きの三角形を作りたい場合、以下のように設定します。
1 2 3 4 5 6 7 8 |
.content{ margin-left:20px; width:0; border-style:solid; border-color:#E0FF00 transparent transparent transparent; /* 線を透明に */ /*border-color:#E0FF00 #ffffff #073795 #000000;*/ border-width:5rem 7rem 10rem 13rem; } |
上の線以外を透明にすることで、下向きの三角形を作ることができました。
透明にすることで三角形を作ることは分かったと思います。
では、幅を0にするとどうなるのでしょうか?
色を元に戻して、右の幅を0にしてみましょう。
1 2 3 4 5 6 7 |
.content{ margin-left:20px; width:0; border-style:solid; border-color:#E0FF00 #ffffff #073795 #000000; /* 色を戻す */ border-width:5rem 0 10rem 13rem; /* 右の幅を0に */ } |
すると右の幅が消え、長方形の横の長さは左の線の太さに依存します。
さらに次は上の幅を0にしてみましょう。
1 2 3 4 5 6 7 |
.content{ margin-left:20px; width:0; border-style:solid; border-color:#E0FF00 #ffffff #073795 #000000; border-width:0 0 10rem 13rem; /* 上の幅を0に */ } |
斜め線を境にして、2色に分かれました。
3色や4色はなかなか使いませんが、
このように斜め線で色を区切るのは使うタイミングがありますね。
borderでの仕組みが分かると、実務などでも使いやすいと思います。
仕組みを知って、使いこなしていきましょう。