【CSS】borderで三角形を作ろう！【仕組みを解説！】

CSSを用いて三角形を作る手順を紹介していきます！
border要素で作る三角形は考え方が難しいです。
ですが、しっかりと１つ１つ理解しながら作成していきましょう。

【CSS】borderで三角形を作ろう！

まずはborder要素の復習からです。
borderを枠線として使用する場合、以下のような形になります。

色は分かりやすいように、「上右下左」の順に「黄白青黒」としています。
border-colorの指定の順番も「上右下左」なので、
この順番で適用されていくのは覚えておきましょう。

さて、このborderですが、幅を広げると面白いことが起こります。
「border-width」を「5rem」くらいにしてみましょう。

それぞれのborderの境目が斜めに入っていることが分かりますね。
さらにここで中身をなくしてみます。
すると、さらに面白いことになります。

この状態でdivの幅を0にしてみましょう。

すると要素がborderだけになり、4つの三角形で出来た四角形ができます。
次はborder-widthを弄ってみましょう。
以下のように幅を変更します。

すると以下のように表示が変更されます。

これは次のように形が決まっています。

指定した幅によって、集まる部分が変わります。
さらに

• 長方形の横の幅が「左右」の線の幅の合計で決まる
• 縦の幅は「上下」の線の幅の合計で決まる

ことも分かります。

これではまだ四角形なので、ここから三角形にします。
三角形にするのは簡単で、

例えば下向きの三角形を作りたい場合、以下のように設定します。

上の線以外を透明にすることで、下向きの三角形を作ることができました。

透明にすることで三角形を作ることは分かったと思います。
では、幅を0にするとどうなるのでしょうか？
色を元に戻して、右の幅を0にしてみましょう。

すると右の幅が消え、長方形の横の長さは左の線の太さに依存します。
さらに次は上の幅を0にしてみましょう。

斜め線を境にして、2色に分かれました。
3色や4色はなかなか使いませんが、
このように斜め線で色を区切るのは使うタイミングがありますね。

borderでの仕組みが分かると、実務などでも使いやすいと思います。
仕組みを知って、使いこなしていきましょう。