三角形の作り方｜CSS

CSSで上向き、下向き、右、左向きの三角形の作り方のご紹介です。
三角形を作るうえで必要になってくるプロパティが「border」だ。
これが、またよくわからない原理で三角形が作られているのでその辺りも解説していこうと思います。

borderで三角形？

borderで三角形を作るには、borderで四角を作る時の角が斜めになからそれを利用して三角形を作っています。
一片以外は、すべて非表示（transparent）にすることで三角形っぽく見せているのです。
なんだか文字ではうまく伝えられないので、アニメーションでborderの上→右→下→左と表示してみます。

See the Pen
CSSで三角形 by endebataro (@endebataro)
on CodePen.

上向きの三角形

上のアニメーションを参考に上向きの三角形を作ります。

【CSS】

  .sankaku {
    border-right: 100px solid transparent;
    border-bottom: 100px solid #137a5b;
    border-left: 100px solid transparent;
    box-sizing: border-box
  }

【Demo】

See the Pen
CSSで上向き三角形 by endebataro (@endebataro)
on CodePen.

下向きの三角形

【CSS】

  .sankaku {
    border-top: 100px solid #1dfcb9;
    border-right: 100px solid transparent;
    border-left: 100px solid transparent;
  }

【Demo】

See the Pen
CSSで下向き三角形 by endebataro (@endebataro)
on CodePen.

右向きの三角形

【CSS】

  .sankaku {
    border-top: 100px solid transparent;
    border-bottom: 100px solid transparent;
    border-left: 100px solid #87ffdb;
  }

【Demo】

See the Pen
CSSで右向き三角形 by endebataro (@endebataro)
on CodePen.

左向きの三角形

【CSS】

  .sankaku {
    border-top: 100px solid transparent;
    border-right: 100px solid #17c18e;
    border-bottom: 100px solid transparent;
  }

【Demo】

See the Pen
CSSで左向き三角形 by endebataro (@endebataro)
on CodePen.

まとめ

いかがだったでしょうか？
↑この「いかがだったでしょうか？」って、いろんなキュレーションサイトで見るたびに可笑しくなってしまいます。
いかがもなにも。。。。ねぇ。

いつか自分のブログでも言ってみたいと思っていた言葉でした。