CSSで三角形を作成します。今回はclip-pathプロパティとpolygon関数を使用します。
polygon関数は以下を参考にして下さい。
前提
例として以下のHTMLを使用します。
<div class="triangle"></div>三角形の実例
その1 – 正三角形
CSS
.triangle {
width: 100px;
height: 100px;
clip-path: polygon(50% 0, 0 100%, 100% 100%);
background-color: blue;
}結果
その2 – 直角三角形
CSS
.triangle {
width: 100px;
height: 100px;
clip-path: polygon(0 0, 0 100%, 100% 100%);
background-color: blue;
}結果
その3 – 二等辺三角形
CSS
.triangle {
width: 100px;
height: 100px;
clip-path: polygon(50% 60%, 0 100%, 100% 100%);
background-color: blue;
}結果
最後に
特にありません。