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

  • 2021年3月5日
  • 2022年8月11日
  • css
css

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

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

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

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

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

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

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

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

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

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

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

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

ことも分かります。

色を透明にして三角形を作ろう

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

三角形にしたい線以外の色を透明にします

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

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

幅を0にするとどうなるの?

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

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

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

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