Posted by NAGAYA on Sep 7th, 2017 こんにちは。めぐたんです。 今回からCSSのborderプロパティだけで作る三角形について、全2回に渡ってお届けします。 「borderプロパティだけ」、つまりブラウザの種類やバージョンに依存しないのでもしかすると前々から使われていた手法なのかもしれませんが、CSS3の登場以降CSSだけで色々な表現に挑戦する方も増えたのではないでしょうか?私も最近使う機会がよくあると感じるのでまとめてみました。 .triangle{ border-right: 50px solid transparent; border-bottom: 86.6025px solid #b2ce54; border-left: 50px solid transparent; } なぜこのように「borderだけで三角形ができるのか」を理解するには、bor
![CSSだけで三角形を作ろう!その1:borderプロパティの仕組みをマスター | 株式会社グランフェアズ](https://cdn-ak-scissors.b.st-hatena.com/image/square/2b5a38c8337d9c490dde94c0d493cdb562b75d00/height=288;version=1;width=512/https%3A%2F%2Fwww.granfairs.com%2Fblog%2Fupload%2Fstaff-2017-09-07-make-triangle-with-css.png)