CSSで三角形をつくる
CSSのclip-path
を利用した三角形のつくりかた、いつも忘れて調べるので、メモとして残しておく。
<div class="triangle"></div>
.triangle { background-color: #fff; width: 60px; height: calc(tan(60deg) * 60px / 2); clip-path: polygon(50% 0, 100% 100%, 0 100%); /* 上向き */ clip-path: polygon(0 0, 100% 50%, 0 100%); /* 右向き */ clip-path: polygon(0 0, 100% 0, 50% 100%); /* 下向き */ clip-path: polygon(0 50%, 100% 0, 100% 100%); /* 左向き */}
正三角形
.triangle { width: 60px; height: calc(60px / 2 * tan(60deg)); clip-path: polygon(50% 0, 100% 100%, 0 100%);}
直角二等辺三角形
.triangle { width: 60px; height: calc(60px / 2); clip-path: polygon(50% 0, 100% 100%, 0 100%);}
不等辺三角形
/* 鋭角 */.triangle { width: 60px; height: 30px; clip-path: polygon(75% 0, 100% 100%, 0 100%);}
/* 鈍角 */.triangle { width: 60px; height: 30px; clip-path: polygon(100% 0, 50% 100%, 0 100%);}