CSSで三角形を作る [border編]

三角形の作り方は、調べた限りだと2通りの方法がある。

• borderを利用する
• rotateする
  • qiitaのタグなんかはこの方法
  • ここの左側部分ね↓

今回はborderで作る方法を紹介します。

borderで作る

ポイント
borderのtop, right, bottom, leftの境目は賞状を入れる額縁のようになっている。
この性質を利用して三角形を作る。

borderの境目は、こんな感じで斜めになっている。

See the Pen triangle1 by ckona (@ckona) on CodePen.

上記の widthと heightを 0pxにして、border-widthを大きくしたものが下記。

See the Pen triangle2 by ckona (@ckona) on CodePen.

あとは、 不要な場所のborder-colorを transparentなり背景色と同色なりに設定してあげれば、三角形の完成。

See the Pen triangle3 by ckona (@ckona) on CodePen.

応用

これを応用すれば草を生やすこともできる。

See the Pen grass by ckona (@ckona) on CodePen.

参考

• http://www.htmq.com/style/border.shtml
  • ドキュメント的なやつ
• https://www.granfairs.com/blog/staff/make-triangle-with-css
  • めっちゃわかりやすい
• https://qiita.com/Qiita/items/edae7417214c8e957f54
  • Qiita記事にCodePenを埋め込む方法