2021年10月23日cssスポンサーリンクcssだけで作れる正三角形1~8はいずれも、三角形の大きさは「border」の太さ(※border-width)を変更すればいいが、1:$\sqrt{3}$の比率で設定しなければなりません。色は「border」の色(※border-color)を変更すればOKです。詳細は各項目に記述しています。ページ内リンクで飛ばして読まれる方もいらっしゃるかもしれないので、各項目に重複した内容も書いています。大きさを調整するには、まず「border-top」「border-bottom」の幅を決めます。上の例だと「100px」ですね。これを2倍すると正三角形の辺の長さになります。次に、「border-top」「border-bottom」の幅を$\sqrt{3}$倍した値を「border-left」の幅に指定します。1.73倍で問題ないと思います。173$としています。これで、大きさを調整することができます。ちなみにborder-leftの幅が正三角形の高さになります。大きさを調整するには、まず「border-left」「border-right」の幅を決めます。上の例だと「100px」ですね。これを2倍すると正三角形の辺の長さになります。次に、「border-left」「border-right」の幅を$\sqrt{3}$倍した値を「border-top」の幅に指定します。1.73倍で問題ないと思います。173$としています。これで、大きさを調整することができます。ちなみにborder-topの幅が正三角形の高さになります。大きさを調整するには、まず「border-top」「border-bottom」の幅を決めます。上の例だと「100px」ですね。これを2倍すると正三角形の辺の長さになります。次に、「border-top」「border-bottom」の幅を$\sqrt{3}$倍した値を「border-right」の幅に指定します。1.73倍で問題ないと思います。173$としています。これで、大きさを調整することができます。ちなみにborder-rightの幅が正三角形の高さになります。大きさを調整するには、まず「border-left」「border-right」の幅を決めます。上の例だと「100px」ですね。これを2倍すると正三角形の辺の長さになります。次に、「border-left」「border-right」の幅を$\sqrt{3}$倍した値を「border-bottom」の幅に指定します。1.73倍で問題ないと思います。173$としています。これで、大きさを調整することができます。ちなみにborder-bottomの幅が正三角形の高さになります。※上のソースだと#000となっている箇所まとめborderの幅の指定を少し調整するだけでcssだけで正三角形を作ることができました。正三角形を半分に割ると、$30^{\circ}$、$60^{\circ}$、$90^{\circ}$の直角三角形になるので、有名な$1:2:\sqrt{3}$が使えますね。数学が苦手な人は上のとおり計算すれば正三角形になると思いますm(__)mおかしい点などありましたら、コメントいただければ幸いです。