CSSだけで作る三角形（シンプルな作り方）

「CSSだけで三角形を作る方法？とことん検証！」でcssのborderを使って色々なパターンの形を確認してみました。確認をしている中で、三角形のシンプルな作り方がある程度想像できたので、それをまとめておきたいと思います。

スポンサーリンク

直角三角形

直角三角形はborderを2つ指定すれば簡単に作れます。ただし、隣り合う2つを指定する必要があります。例えば、上と右、左と下という感じです。対面になる上下とかはNGです。

見た方が分かりやすいので早速見ていきます。

<div class="triangle1-1"></div>
<style>
.triangle1-1 {
  border-right: 200px solid blue;
  border-bottom: 200px solid yellow; 
  height: 0;
  width: 0;
}
</style>

border同士がどのように関連しているか分かるように色を付けていますが、最終的に不要な方のborder-colorにはtransparentを指定します。

borderの幅と長さの関係性

上のとおり、border-bottomの幅で直角三角形の高さを指定でき、border-rightの幅で直角三角形の底辺を指定することができます。

これが分かることで、いろいろな直角三角形を作ることができそうです。

直角二等辺三角形

上図の黄色も青も直角二等辺三角形なので、不要な青の方をtransparentにすれば完成です。

<div class="triangle1-2"></div>
<style>
.triangle1-2 {
  border-right: 200px solid transparent;
  border-bottom: 200px solid green; 
  height: 0;
  width: 0;
}
</style>

※少し目が疲れるので緑色にしました

ポイント

直角二等辺三角形は斜辺以外（高さと底辺）が等しければ良いのでborder-right、border-bottomともに同じ幅にすればOKです。

$30^{\circ}$、$60^{\circ}$、$90^{\circ}$の直角三角形

$1:2:\sqrt{3}$ の有名な直角三角形です。ちなみに $2$が斜辺です。

とうことで、borderで指定できるのは斜辺以外なので、底辺と高さを$1:\sqrt{3}$にすれば、OKです。

底辺：高さ$=1:\sqrt{3}$の場合

底辺が$1$に対して高さが$\sqrt{3}$なので、高さ（border-bottom）を底辺200pxの$\sqrt{3}$倍にします。※$\sqrt{3}=1.73$で計算します

<div class="triangle1-3"></div>
<style>
.triangle1-3 {
  border-right: 200px solid transparent;
  border-bottom: 346px solid green; 
  height: 0;
  width: 0;
}
</style>

背の高い$30^{\circ}$、$60^{\circ}$、$90^{\circ}$の直角三角形ができました。

ポイント

2つのborderで三角形の斜辺以外を指定できます。残りの1辺は2つの辺に依存するので、実質すべての辺の長さを指定できることになります。

ですので、ある程度比率さえ分かれば好きな直角三角形を作ることができます。

底辺：高さ$=\sqrt{3}:1$の場合

高さが$1$に対して底辺が$\sqrt{3}$なので、底辺（border-right）を高さ200pxの$\sqrt{3}$倍にします。※$\sqrt{3}=1.73$で計算します

<div class="triangle1-4"></div>
<style>
.triangle1-4 {
  border-right: 346px solid transparent;
  border-bottom: 200px solid green; 
  height: 0;
  width: 0;
}
</style>

横に伸びた$30^{\circ}$、$60^{\circ}$、$90^{\circ}$の直角三角形ができました。

ポイント

2つのborderで三角形の斜辺以外を指定できます。残りの1辺は2つの辺に依存するので、実質すべての辺の長さを指定できることになります。

ですので、ある程度比率さえ分かれば好きな直角三角形を作ることができます。

直角がない三角形

直角がない三角形はborderを3つ指定すれば作れます。ただし、色を付けるのは真ん中のborderにする必要があります。例えば、上、下、右の3つの場合だと、右は上下に囲まれていて間になりますので、右に色を付けます。対面が存在するborderに色を付けるとNGです。

見た方が分かりやすいので早速見ていきます。

<div class="triangle2-1"></div>
<style>
.triangle2-1 {
  border-bottom: 200px solid green;
  border-left: 200px solid red; 
  border-right: 200px solid yellow; 
  height: 0;
  width: 0;
}
</style>

border同士がどのように関連しているか分かるように色を付けていますが、最終的に不要なborder-colorにはtransparentを指定します。上の例だとleftとrightをtransparentにします。

borderの幅と長さの関係性

引用：minecraft

上のとおり、border-bottomの幅で三角形の高さを指定でき、border-rightとborder-leftの幅を足したものが三角形の底辺になります。

これが分かることで、いろいろな三角形を作ることができそうです。

二等辺三角形

上図の緑色が（直角ではない）二等辺三角形なので、不要な赤と黄の方をtransparentにすれば完成です。

<div class="triangle2-2"></div>
<style>
.triangle2-2 {
  border-bottom: 200px solid green;
  border-left: 200px solid transparent; 
  border-right: 200px solid transparent; 
  height: 0;
  width: 0;
}
</style>
ポイント

二等辺三角形は2辺が等しければ良いのでborder-left、border-rightともに同じ幅にすればOKです。

なぜborder-left、border-rightともに同じ幅であればOKなのか？

下記図をご覧ください。

border-leftの幅は「a」です。border-rightの幅も同じなので「a」です。また緑の下の辺を底辺としたときの三角形の高さを「h」とします。
そうすると、三平方の定理より、$b^2=a^2 + h^2$➞$b=\sqrt{a^2 + h^2}$、$c^2=a^2 + h^2$➞$c=\sqrt{a^2 + h^2}$.。よって、$b=c$になります。従って緑の三角形は二等辺三角形だと分かりました。

正三角形

正三角形は下記のとおり、頂点の1つから対辺に対して垂線をおろすと$30^{\circ}$、$60^{\circ}$、$90^{\circ}$の直角三角形を作れます。すると、辺の長さは下記のような比率になります。

ということで、margin-leftとmargin-bottomの比率が$1:\sqrt{3}$となれば、正三角形が作れます。margin-leftを200pxで作るので、margin-bottomは$200 \times \sqrt{3}$とすればOKです。$\sqrt{3}=1.73$くらいで計算して問題ないので、$200 \times 1.73 = 346$pxで大丈夫です。

<div class="triangle2-3"></div>
<style>
.triangle2-3 {
  border-bottom: 346px solid green;
  border-left: 200px solid transparent; 
  border-right: 200px solid transparent; 
  height: 0;
  width: 0;
}
</style>

きれいな正三角形ができました。

ポイント

正三角形の特徴から、1辺の半分の長さの$\sqrt{3}$倍がもう1辺になるので、border-left、border-rightはともに同じ幅、かつ、border-bottomをborder-rightの$\sqrt{3}$倍にすればOKです。

頂点を左にずらした三角形

こちらの図を見てもらうと分かるのですが、border-leftとborder-rightの幅が同じであれば、三角形（緑）の上側の頂点はど真ん中にきます。

border-leftの幅の割合を小さくすれば、三角形（緑）の頂点は左にずれます。※需要があるかは不明ですが…

<div class="triangle2-4"></div>
<style>
.triangle2-4 {
  border-bottom: 200px solid green;
  border-left: 100px solid transparent; 
  border-right: 300px solid transparent; 
  height: 0;
  width: 0;
}
</style>

上側の頂点が左に寄った三角形ができました。

ポイント

border-leftとborder-rightの比率を変えるだけで、三角形の1つの頂点の位置をずらすことができます。

頂点を右にずらした三角形

border-rightの幅の割合を小さくすれば、三角形（緑）の頂点は右にずれます。※需要があるかは不明ですが…

<div class="triangle2-5"></div>
<style>
.triangle2-5 {
  border-bottom: 200px solid green;
  border-left: 300px solid transparent; 
  border-right: 100px solid transparent; 
  height: 0;
  width: 0;
}
</style>

上側の頂点が右に寄った三角形ができました。

ポイント

border-leftとborder-rightの比率を変えるだけで、三角形の1つの頂点の位置をずらすことができます。

まとめ

各borderに指定した幅を計算して求めたり、どこの長さと紐づいているか把握しておくことで、長くしたり短くしたりすることで、三角形を自由に作ることができます。

簡単なアイコンなどはcssで作れるようになると、少し便利そう。

ちなみに、今回も三角形を作りたくて調べてみた結果ですｗ

スポンサーリンク