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;
}