CSS | 正三角形（Equilateral Triangle）の作り方
CSSで正三角形をshadowプロパティを使って作成する方法と、clip-pathのpolygonを使って作成する方法の２通りを紹介しています。
角丸な三角形の作り方は以下の記事で紹介していますので、是非。
https://1-notes.com/css-shape-rounded-triangle-design/正三角形の作り方
CSSのshadowプロパティを使って正三角形を作成する方法です。
See the Pen CSS Equilateral triangle（border） by yochans (@yochans) on CodePen.
HTMLでは上向き、下向きの正三角形につかうdiv要素を作成しています。
<div class="container">
<div class="equilateral-triangle-1"></div>
<div class="equilateral-triangle-2"></div>
</div>正三角形の高さ（border-bottomまたはborder-top）を基準にする場合、border-right、border-leftは(2√3)*高さ/2/3、要素の横幅は(2√3)*高さ/3。
また、border-right、border-leftを基準にする場合は(2√3)*辺の長さ（横幅）を高さに指定します。
.equilateral-triangle-1 {
width: 173.2px; /* (2√3)*h/3 */
height: 150px; /* √3/2*w */
border-bottom: 150px solid #ffa07a; /* √3/2*w */
border-right: 86.6px solid transparent; /* (2√3)*height/2/3 */
border-left: 86.6px solid transparent; /* (2√3)*height/2/3 */
box-sizing: border-box;
}
.equilateral-triangle-2 {
width: 173.2px; /* (2√3)*h/3 */
height: 150px; /* √3/2*w */
border-top: 150px solid #ffa07a; /* √3/2*w */
border-right: 86.6px solid transparent; /* (2√3)*height/2/3 */
border-left: 86.6px solid transparent; /* (2√3)*height/2/3 */
box-sizing: border-box;
}新しいサイト「Material Box」にて更に多くの図形・マーク・アイコンデザインを紹介しています。
CSS – 三角形 | Material Box
正三角形の作り方（polygonバージョン）
clip-pathプロパティのpolygonを使った正三角形の作り方です。
See the Pen CSS Equilateral triangle（Polygon） by yochans (@yochans) on CodePen.
HTMLは同じものになります。
<div class="container">
<div class="equilateral-triangle-1"></div>
<div class="equilateral-triangle-2"></div>
</div>サンプルコードのpolygonではパーセントによる指定になりますので、要素の横幅（＝編の長さ）と高さを正三角形に合わせておけば自動的に正三角形の形状になります。
.equilateral-triangle-1 {
width: 173.2px; /* (2√3)*h/3 */
height: 150px; /* √3/2*w */
background: #deb887;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.equilateral-triangle-2 {
width: 173.2px; /* (2√3)*h/3 */
height: 150px; /* √3/2*w */
background: #deb887;
clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}polygonの指定順序は、「equilateral-triangle-1」三角形の上側にある頂点から右下、左下となっています。
「equilateral-triangle-2」は三角形の下側にある頂点から左上、右上と指定しています。
始点から終点への繋ぎ指定は省略可能です。