こういうTipsは一字一句丸覚えするというより 「widthとheightをゼロにして borderで作るんだっけ?」 位でいいからポイントを押さえて覚える→理解するの流れが個人的に多いです。 我流にあまり固執せず、調べながら作れる人がやっぱり強いのかなと最近は思ってます。
目次
borderで三角形をつくるときはwidthとheightをゼロに
![cssで三角形を作る時のポイントは2つ。widthとheightをゼロにすることと、borderの上下左右の幅と色](https://www.tipswork.net/wp-content/uploads/2021/08/E1_SLHtVgAU3RR6-1024x576.jpg)
作り方を理解すれば、逆三角形も斜めも作れる
![横幅いっぱいの三角形には、vwの単位を使います、斜め三角形はどの辺のborderを無力にするかが大切です。](https://www.tipswork.net/wp-content/uploads/2021/08/E1_SLFmVUAAtyHK-1024x576.jpg)
実装サンプルコード
See the Pen
CSS|100vw triangle by nagaiyukari (@nagaiyukari)
on CodePen.