CSSで三角形を作る方法【現役エンジニアが解説】
今回は、CSSで三角形を作る方法について、各向きに分け、簡単に解説していきます。
上向き、下向き
上向きと下向きの三角形はborderで描けます。
左右のborderを透明にし、上向きは下、下向きは上のborderを着色します。
.triangle{ width:0; height:0; /* 上向きの場合 */ border-bottom:50px solid red; /* 下向きの場合 */ /* border-top:50px solid red; */ border-left:50px solid transparent; border-right:50px solid transparent; }
上記のコードでは、triangleのクラスの要素に、borderを使うことで上向きや下向きの三角形を表現しています。
左向き、右向き
左向きと右向きの三角形もborderで表現可能です。
上下のborderを透明にし、左向きは右、右向きは左のborderに色を付けます。
.triangle{ width:0; height:0; /* 左向き */ border-right:50px solid green; /* 右向き */ /* border-left:50px solid green; */ border-top:50px solid transparent; border-bottom:50px solid transparent; }
上記のコードでは、triangleのクラスを持つ要素に対し、borderを使用することで左向きや右向きの三角形を表現しています。
三角形二か所分
二か所分の三角形を描く場合もborderで表現します。
表示する二か所のうちいずれかを着色し、着色していない部分の反対の部分を透明にします。
.triangle{ width:0; height:0; /* 左上向き */ border-left:50px solid blue; border-bottom:50px solid transparent; /* 右上向き */ border-right:50px solid blue; border-bottom:50px solid transparent; /* 右下向き */ border-right:50px solid blue; border-top:50px solid transparent; /* 左下向き */ border-left:50px solid blue; border-top:50px solid transparent; }
上記のコードでは、triangleというクラスを持つ要素に対し、borderを指定することでそれぞれ二か所分の三角形を表現しています。