三角形がCSSのborderでなぜ作れるのか。その理由を詳しく解説 コーディング

CSSで三角を作る簡単な方法|図を用いて分かりやすく解説

CSSのborderプロパティで三角形を作れることは有名ですね。
簡単に三角形を作れるジェネレーターが存在するので、それらを使って作成する方も多いと思います。

でも、どうしてborderで三角形が作れるのか、仕組みをご存じでしょうか。
今回は、仕組みやborderプロパティの特性について詳しく解説します。

スポンサーリンク

三角形ができる仕組み

.example {
     width: 100px;
     height: 100px;
     border-top: 20px solid #a0dde2;
     border-left: 20px solid #e2a0b4;
     border-right: 20px solid #eec496;
     border-bottom: 20px solid #a0e2c2;
 }

まずは、上下左右の全方向にborderをかけてみましょう。
わかりやすく、それぞれ別の色を指定しています。

するとこうなります。
角の継ぎ目をよくみると、切り口が斜めになっていますね。
「borderとborderの継ぎ目は斜めになる」というのがborderプロパティの特性です。
この特性を利用して、三角形を作ることができます。

「.example」のwidthとheightをだんだん減らしていくとこのようになります。
一番右の「幅:0/高さ:0」をみると、三角形が4つできていますね。

使いたい部分以外の3つを透明にすれば、三角形が完成します。

スポンサーリンク

角度違いの三角形

2辺に対して高さを指定することで、「右上」「左上」「右下」「左下」などの三角形も作れます。

HTML

<div class="example ex01"></div>
<div class="example ex02"></div>
<div class="example ex03"></div>
<div class="example ex04"></div>

CSS

.example {
    width: 0;
    height: 0;
}
.example.ex01 {
    border-style: solid;
    border-width: 30px 30px 0 0;
    border-color: #a0dde2 transparent transparent transparent;
}
.example.ex02 {
    border-style: solid;
    border-width: 0 30px 30px 0;
    border-color: transparent #e2a0b4 transparent transparent;
}
.example.ex03 {
    border-style: solid;
    border-width: 0 0 30px 30px;
    border-color: transparent transparent #eec496 transparent;
}
.example.ex04 {
    border-style: solid;
    border-width: 30px 0 0 30px;
    border-color: transparent transparent transparent #a0e2c2;
}

デモ

このように、2辺に高さを指定すれば、このように角度の違った三角形も作ることができます。

borderプロパティで三角形ができる仕組みを理解していると、台形などの図形も簡単にできるようになります。
応用して、おしゃれなタブのデザインを作る方法を下記の記事でご紹介しています。

スポンサーリンク

ジェネレーター

最後に、簡単に作れるジェネレーターのご紹介です。
作りたい三角形にチェックをいれると、自動でコードが生成されます。

生成されたコードをじっくり解読することで、仕組みについての理解も深まりそうです。

CSS三角形作成ツール
CSS三角形作成ツール - CSSのみで三角形を描く
スポンサーリンク

まとめ

CSSのborderで三角形ができる仕組みを解説しました。
なんとなくコピペで使っていたら、仕組みを理解することで色々なシーンで応用できます。
是非この機会に理解を深めましょう!