三角形の作り方は、調べた限りだと2通りの方法がある。
今回は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を埋め込む方法