創作ポスト

創作物の力で元気になろう。すてきな創作物を知りたい人、自分で創作物を作っている人に向けて、手紙を書くように記事を届けます。

CSSのborderプロパティで三角形を作る方法とその解説

      2016/04/25

CSSのborderプロパティで三角形が作れることをご存知でしょうか。
知っていたとしても、一度使ったくらいでは、使ってからしばらくすると忘れてしまいやすい部分でもあると思います。
この記事では、CSSのborderプロパティで三角形を作る方法に加え、どうしてborderプロパティで三角形が作れるのかの理由を説明します。


スポンサーリンク

はじめに

この記事では、以下のような三角形をCSSのborderプロパティを利用して作ります。
それに加え、何故このような三角形ができるのかを理解することを目的としています。

borderプロパティがなぜ三角形になるのか、まだ想像もつかないかもしれません。
なので、この記事の前半では、普通のborderの構造を理解するところからはじめます。
後半で、前半の知識を用いて、borderプロパティで三角形を作っていきます。

普通のborderの構造を理解する

基本となる何の変哲もないborderを確認する

HTML

CSS

上の図形は、div要素に30pxのborderをかけたものです。
灰色の長方形がborderを指定したdiv要素、その外側の黒色の枠線がborderです。

CSSのborderプロパティは、指定した要素の上下左右に対してborder-style, border-width, border-colorをまとめて指定することができるプロパティです。
上の図形では、上下左右のborderは繋がっているように見えます。
しかし、borderをborder-top, border-right, border-bottom, border-leftに分割できる以上、border-topとborder-rightなどの隣り合ったborderには分け目があるはずです。
その分け目はどこにあるのでしょうか?

それを確かめるために、borderを上下左右ごとの指定に分割し、色を変えてみましょう。

borderを上下左右に分けて考えてみる

HTML

CSS

上の図形は、borderの太さは前の図形と同じまま、上下左右の色を変えたものです。
上の図形を見ると、borderの頂点から、borderをかけた長方形の頂点に向け、一直線に分け目が入っていることがわかります。

さて、この記事では三角形を作りたいわけですが、この分け目の性質が利用できるような気がしませんか?
上の図形では長方形に対してborderをかけていますが、borderをかける要素のwidthとheightを限界まで縮めて0にしたら、分け目と分け目が結びつき、三角形ができるのではないでしょうか。
それを試してみましょう。

borderで三角形を作る

borderを指定する要素のwidth, heightを0にする

HTML

CSS

上の図形は、borderの設定自体は前のものと同じですが、borderをかけているdiv要素のwidth, heightを共に0まで縮めたものです。
予想通り、borderの分け目と分け目が結びつき、4つの三角形ができています。

borderをかけているdiv要素が大きさを持たないのに、borderが存在するので不思議に思うかもしれません。
ですが、widthもheightも持たないdiv要素から、上下左右に向かって30pxずつborderが伸びている、と考えると納得できるのではないでしょうか。

それでは最後に、4つの三角形のうちひとつのみを残し、他の三角形は透明にすることで、三角形を完成させましょう。

一方向のborderを除き、残りすべてのborderを透明にする

HTML

CSS

border-top, border-right, border-bottom, border-leftのうち、一方向のborderを除き、残りすべてのborderの色をtrasparent(透明)に設定しました。
これにより、ひとつの三角形だけが浮かび上がります。
これで完成です。

transparentを指定するborderの方向を変えれば、浮かび上がる三角形の向きも変わります。

終わりに

CSSだけで三角形を作る方法は、一度使ったくらいでは意外と忘れやすいような気がしています。
どうしてborderで三角形ができるのかまで理解すれば、これから先も安心です。
CSSが大好きな人たちは、どんどん図形を描いていきましょう!

 - Webサイト運営, CSS

PAGE TOP