CSSだけで三角形を作ろう！その1：borderプロパティの仕組みをマスター | 株式会社グランフェアズ

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

[kjtec]

“必要なborderの特性で、この斜めが三角形”

[yoshi-nkyma]

“border-top: 50px solid #F0897F; border-right: 50px solid transparent; border-left: 50px solid transparent;”

[letitride]

borderの直線と三角の仕組み

[with3939]

CSSだけで三角形を作ろう！その1：borderプロパティの仕組みをマスター

[hayatonexco]

CSS borderで三角形

[idr_zz]

たまにやりたくなるCSSの三角形。サイズ0で太いborderに色を付ける。 CSSだけで三角形を作ろう！その1：borderプロパティの仕組みをマスター | 株式会社グランフェアズ

[kgcrz2]

“border-right: ”