数日前のHTMLネタで円を描きましたが、今回は三角形を描いてみました。
タブレットやスマートフォンを小物撮影光源に（2）2021/08/25●
/*rule.css*/
#UpperTriangle{
width: 0; /*幅*/
height: 0; /*高さ*/
border-right:200px solid;
/*右半分を表示*/
border-left:200px solid;
/*左半分を表示*/
border-bottom:346px solid magenta;
/*下ボーダーのスタイル・太さ・色を指定する*/
}
/*rule.css*/
必要最低限のHTMLとCSSはこんな感じで・・・
<!--index.html-->
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="rule.css">
<title>fill in the blank by color</title>
</head>
<body bgcolor="#000000">
<center>
<div id='LeftTriangle'></div>
</center>
</body>
</html>
<!--index.html-->
/*rule.css*/
@charset"UTF-8";
html,
body{
width:100%;
height:100%;
display:flex;
justify-content:center;
align-items:center;
}
#UpperTriangle{
width:0;
height:0;
border-right:200px solid;
border-left:200px solid;
border-bottom:346px solid magenta;
}
/*rule.css*/
/*rule.css*/
@charset"UTF-8";
html,
body{
width:100%;
height:100%;
display:flex;
justify-content:center;
align-items:center;
}
#LowerTriangle{
width:0;
height:0;
border-right:200px solid;
border-left:200px solid;
border-top:346px solid magenta;
}
/*rule.css*/
/*rule.css*/
@charset"UTF-8";
html,
body{
width:100%;
height:100%;
display:flex;
justify-content:center;
align-items:center;
}
#RightTriangle{
width: 0;
height: 0;
border-left: 346px solid magenta;
border-top: 200px solid;
border-bottom: 200px solid;
}
/*rule.css*/
/*rule.css*/
@charset"UTF-8";
html,
body{
width:100%;
height:100%;
display:flex;
justify-content:center;
align-items:center;
}
#LeftTriangle{
width: 0;
height: 0;
border-right: 346px solid magenta;
border-top: 200px solid;
border-bottom: 200px solid;
}
/*rule.css*/
なお、1辺があの正三角形の高さは√3a/2となるので、
a=100であれば約87（86.6）となります。
よって、200px+200pxの底辺に対して高さは346pxという値になります。
