CSSだけで正三角形を作る方法
スポンサーリンク

cssだけで作れる正三角形

１～８はいずれも、三角形の大きさは「border」の太さ（※border-width）を変更すればいいが、1:$\sqrt{3}$の比率で設定しなければなりません。色は「border」の色（※border-color）を変更すればOKです。

詳細は各項目に記述しています。ページ内リンクで飛ばして読まれる方もいらっしゃるかもしれないので、各項目に重複した内容も書いています。ご了承くださいm(__)m

１．右向きの正三角形

<div class="triangle"></div>
<style>
.triangle {
  border-left: 173px solid #000;
  border-top: 100px solid transparent; 
  border-bottom: 100px solid transparent; 
  height: 0;
  width: 0;
}
</style>

三角形の大きさの変更方法

大きさを調整するには、まず「border-top」「border-bottom」の幅を決めます。上の例だと「100px」ですね。これを2倍すると正三角形の辺の長さになります。

次に、「border-top」「border-bottom」の幅を$\sqrt{3}$倍した値を「border-left」の幅に指定します。1.73倍で問題ないと思います。
※大きい三角形を作る場合は、1.7320508倍の方がより正三角形に近づきます

上の例の場合ですと、$100 \times 1.73 = 173$としています。これで、大きさを調整することができます。ちなみにborder-leftの幅が正三角形の高さになります。

三角形の色の変更方法

  • 三角形の色は「border」の色
    ※上のソースだと#000となっている箇所

２．下向きの正三角形

<div class="triangle2"></div>
<style>
.triangle2 {
  border-top: 173px solid #000;
  border-left: 100px solid transparent; 
  border-right: 100px solid transparent; 
  height: 0;
  width: 0;
}
</style>

三角形の大きさの変更方法

大きさを調整するには、まず「border-left」「border-right」の幅を決めます。上の例だと「100px」ですね。これを2倍すると正三角形の辺の長さになります。

次に、「border-left」「border-right」の幅を$\sqrt{3}$倍した値を「border-top」の幅に指定します。1.73倍で問題ないと思います。
※大きい三角形を作る場合は、1.7320508倍の方がより正三角形に近づきます

上の例の場合ですと、$100 \times 1.73 = 173$としています。これで、大きさを調整することができます。ちなみにborder-topの幅が正三角形の高さになります。

三角形の色の変更方法

  • 三角形の色は「border」の色
    ※上のソースだと#000となっている箇所

３．左向きの正三角形

<div class="triangle3"></div>
<style>
.triangle3 {
  border-right: 173px solid #000;
  border-top: 100px solid transparent; 
  border-bottom: 100px solid transparent; 
  height: 0;
  width: 0;
}
</style>

三角形の大きさの変更方法

大きさを調整するには、まず「border-top」「border-bottom」の幅を決めます。上の例だと「100px」ですね。これを2倍すると正三角形の辺の長さになります。

次に、「border-top」「border-bottom」の幅を$\sqrt{3}$倍した値を「border-right」の幅に指定します。1.73倍で問題ないと思います。
※大きい三角形を作る場合は、1.7320508倍の方がより正三角形に近づきます

上の例の場合ですと、$100 \times 1.73 = 173$としています。これで、大きさを調整することができます。ちなみにborder-rightの幅が正三角形の高さになります。

三角形の色の変更方法

  • 三角形の色は「border」の色
    ※上のソースだと#000となっている箇所

４．上向きの正三角形

<div class="triangle4"></div>
<style>
.triangle4 {
  border-bottom: 173px solid #000;
  border-left: 100px solid transparent; 
  border-right: 100px solid transparent; 
  height: 0;
  width: 0;
}
</style>

三角形の大きさの変更方法

大きさを調整するには、まず「border-left」「border-right」の幅を決めます。上の例だと「100px」ですね。これを2倍すると正三角形の辺の長さになります。

次に、「border-left」「border-right」の幅を$\sqrt{3}$倍した値を「border-bottom」の幅に指定します。1.73倍で問題ないと思います。
※大きい三角形を作る場合は、1.7320508倍の方がより正三角形に近づきます

上の例の場合ですと、$100 \times 1.73 = 173$としています。これで、大きさを調整することができます。ちなみにborder-bottomの幅が正三角形の高さになります。

三角形の色の変更方法

  • 三角形の色は「border」の色
    ※上のソースだと#000となっている箇所

まとめ

borderの幅の指定を少し調整するだけでcssだけで正三角形を作ることができました。正三角形を半分に割ると、$30^{\circ}$、$60^{\circ}$、$90^{\circ}$の直角三角形になるので、有名な$1:2:\sqrt{3}$が使えますね。

まあ、数学が苦手な人は上のとおり計算すれば正三角形になると思いますm(__)m

おかしい点などありましたら、コメントいただければ幸いです。

スポンサーリンク