CSSのborderで三角形の作り方をざっくり解説します

吹き出しなどの三角形をCSSだけで表現する方法として、borderプロパティが使用されていることが多いです。
一見複雑なことをやっている印象ですが、実はとても単純です。

一目でわかるborder三角形の仕組み

こんなCSSがあります。

CSS

.sankaku{
    height:0;
    width:0;
    border-top:50px solid red;
    border-bottom:50px solid red;
    border-left:50px solid gray;
    border-right:50px solid gray;
}

これをdivに適用すると…

HTML

<div class="sankaku"> </div>

 

こうなる。
さらに左右を、transparentしてみる。

CSS

.sankaku{
    height:0;
    width:0;
    border-top:50px solid red;
    border-bottom:50px solid red;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
}

 

さらに、下線を削除する。

CSS

.sankaku{
    height:0;
    width:0;
    border-top:50px solid red;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
}

 

もうわかりますね！

もう少し詳しく説明してみる

borderを一辺のみに適用した場合、直線が描画されます。
※今後、borderの線種は全てsolidが指定されているものとします。

しかし、隣り合う辺にもborderが適用されると…

上図のように、接する面が、台形に切り取られるのです。

この状態で、内部エリアの幅と高さをゼロにし、一辺をtransparentで透明にすると、三角形が描画されます。

次に、透明にした線の幅を変更してみましょう。

幅 描画結果
50px
 
75px
 
100px
 
150px
 

次に、表示されている線の幅を変更してみましょう。

幅 描画結果
20px
 
50px
 
70px
 
90px
 

このように、線の幅を変更することで、多様な三角形を描くことができます。

具体的な三角形のCSS

次に三角形のCSSを8通り紹介します。

左上向き三角形のCSS

左上向きの三角形は、上線を色指定、右線をtransparentで描画します。
（左線色指定・下線transparentで可）

CSS

.sankaku{
    height:0;
    width:0;
    border-top:50px solid red;
    border-right:50px solid transparent;
}

左上三角形のCSS幅指定

高さは、上線の幅。
横幅は、右線の幅で指定します。

右上向き三角形のCSS

左上向きの三角形は、上線を色指定、左線をtransparentで描画します。
（右線色指定・下線transparentでも可）

CSS

.sankaku{
    height:0;
    width:0;
    border-top:50px solid red;
    border-left:50px solid transparent;
}

右上三角形のCSS幅指定

高さは、上線の幅。
横幅は、左線の幅で指定します。

左下向き三角形のCSS

左下向きの三角形は、下線を色指定、右線をtransparentで描画します。
（左線色指定・上線transparentでも可）

CSS

.sankaku{
    height:0;
    width:0;
    border-bottom:50px solid red;
    border-right:50px solid transparent;
}

右下三角形のCSS幅指定

高さは、下線の幅。
横幅は、右線の幅で指定します。

右下向き三角形のCSS

右下向きの三角形は、下線を色指定、左線をtransparentで描画します。
（右線色指定・上線transparentでも可）

CSS

.sankaku{
    height:0;
    width:0;
    border-bottom:50px solid red;
    border-left:50px solid transparent;
}

右下三角形のCSS幅指定

高さは、下線の幅。
横幅は、右線の幅で指定します。

上向き三角形のCSS

上向きの三角形は、下線を色指定、左線と右線をtransparentで描画します。

CSS

.sankaku{
    height:0;
    width:0;
    border-bottom:50px solid red;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
}

上向き三角形のCSS幅指定

高さは、下線の幅。
横幅は、右線と左線の幅で指定します。

下向き三角形のCSS

下向きの三角形は、上線を色指定、左線と右線をtransparentで描画します。

CSS

.sankaku{
    height:0;
    width:0;
    border-top:50px solid red;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
}

下向き三角形のCSS幅指定

高さは、上線の幅。
横幅は、右線と左線の幅で指定します。

左向き三角形のCSS

左向きの三角形は、右線を色指定、上線と下線をtransparentで描画します。

CSS

.sankaku{
    height:0;
    width:0;
    border-right:50px solid red;
    border-top:50px solid transparent;
    border-bottom:50px solid transparent;
}

左向き三角形のCSS幅指定

高さは、上線と下線の幅。
横幅は、右線の幅で指定します。

右向き三角形のCSS

右向きの三角形は、左線を色指定、上線と下線をtransparentで描画します。

CSS

.sankaku{
    height:0;
    width:0;
    border-left:50px solid red;
    border-top:50px solid transparent;
    border-bottom:50px solid transparent;
}

右向き三角形のCSS幅指定

高さは、上線と下線の幅。
横幅は、左線の幅で指定します。

三角形に影を付ける

borderで作成した三角形に影を付けてみましょう。

影はbox-shadowプロパティを使用します。

box-shadow: 横方向のズレ 縦方向のズレ ぼかし 影の拡大 色
CSS

.sankaku{
    height:0;
    width:0;
    border-left:50px solid red;
    border-top:50px solid transparent;
    border-bottom:50px solid transparent;
    box-shadow:5px 5px 5px 0 rgba(0,0,0,.5);
}

 

どうです？
おかしな影の付き方をしていますね…

transparentで透明にしたとしても、実際には線が存在するので、その部分にも影が描画されてしまうのです。

そこでfilter: drop-shadow()を使用します。

filter: drop-shadow(横方向のズレ 縦方向のズレ ぼかし 色);
CSS

.sankaku{
    height:0;
    width:0;
    border-left:50px solid red;
    border-top:50px solid transparent;
    border-bottom:50px solid transparent;
    filter: drop-shadow(5px 5px 5px rgba(0,0,0,.5));
}

 

今度は思った通りの影が描画されました。

三角形に影を付けるときは、filter: drop-shadow()を使用しましょう。

番外：borderで三角形にしたくない

隣り合ったボーダーを台形に切り取らないで、次のようにL字に交わる図形を作成してみます。

こんなボックスを作りたい！

divを入れ子にします。

HTML

<div class="outer_line">
<div class="innner_line">
こんなボックスを作りたい！
</div>
</div>

外側のdivはパディング0。
内側のdivはマージン0に設定して、それぞれborderで枠線セットします。

CSS

.outer_line{
    padding:0;
    border-left:20px solid blue;
    border-right:20px solid blue;
}
.innner_line{
    margin:0;
    border-top:20px solid red;
    border-bottom:20px solid red;
    width:100%;
    height:100%;
}

外側のdivのパディングの上下に対して値をセットすると、少しおもしろい形になります。

CSS

.outer_line{
    padding:20px 0;
    border-left:20px solid blue;
    border-right:20px solid blue;
}
.innner_line{
    margin:0;
    border-top:20px solid red;
    border-bottom:20px solid red;
    border-left:5px solid white;
    border-right:5px solid white;
    width:100%;
    height:100%;
}

こんなボックスを作りたい！

このほかに、議事要素のafterとbeforeを使用する方法もあります。
いろいろ試してみてください。