2021年10月28日css「CSSだけで三角形を作る方法?とことん検証!」でcssのborderを使って色々なパターンの形を確認してみました。確認をしている中で、三角形のシンプルな作り方がある程度想像できたので、それをまとめておきたいと思います。borderを2つ指定すれば簡単に作れます。隣り合う2つを指定する必要があります。上と右、左と下という感じです。対面になる上下とかはNGです。見た方が分かりやすいので早速見ていきます。0;}</style>border同士がどのように関連しているか分かるように色を付けていますが、最終的に不要な方のborder-colorにはtransparentを指定します。上のとおり、border-bottomの幅で直角三角形の高さを指定でき、border-rightの幅で直角三角形の底辺を指定することができます。黄色も青も直角二等辺三角形なので、不要な青の方をtransparentにすれば完成です。0;}</style>※少し目が疲れるので緑色にしましたポイント直角二等辺三角形は斜辺以外(高さと底辺)が等しければ良いのでborder-right、border-bottomともに同じ幅にすればOKです。有名な直角三角形です。とうことで、borderで指定できるのは斜辺以外なので、底辺と高さを$1:\sqrt{3}$にすれば、OKです。底辺が$1$に対して高さが$\sqrt{3}$なので、高さ(border-bottom)を底辺200pxの$\sqrt{3}$倍にします。0;}</style>背の高い$30^{\circ}$、$60^{\circ}$、$90^{\circ}$の直角三角形ができました。ポイント2つのborderで三角形の斜辺以外を指定できます。残りの1辺は2つの辺に依存するので、実質すべての辺の長さを指定できることになります。ある程度比率さえ分かれば好きな直角三角形を作ることができます。高さが$1$に対して底辺が$\sqrt{3}$なので、底辺(border-right)を高さ200pxの$\sqrt{3}$倍にします。0;}</style>横に伸びた$30^{\circ}$、$60^{\circ}$、$90^{\circ}$の直角三角形ができました。ポイント2つのborderで三角形の斜辺以外を指定できます。残りの1辺は2つの辺に依存するので、実質すべての辺の長さを指定できることになります。ある程度比率さえ分かれば好きな直角三角形を作ることができます。直角がない三角形はborderを3つ指定すれば作れます。色を付けるのは真ん中のborderにする必要があります。上、下、右の3つの場合だと、右は上下に囲まれていて間になりますので、右に色を付けます。対面が存在するborderに色を付けるとNGです。見た方が分かりやすいので早速見ていきます。0;}</style>border同士がどのように関連しているか分かるように色を付けていますが、最終的に不要なborder-colorにはtransparentを指定します。上の例だとleftとrightをtransparentにします。引用:minecraft上のとおり、border-bottomの幅で三角形の高さを指定でき、border-rightとborder-leftの幅を足したものが三角形の底辺になります。緑色が(直角ではない)二等辺三角形なので、不要な赤と黄の方をtransparentにすれば完成です。0;}</style>ポイント二等辺三角形は2辺が等しければ良いのでborder-left、border-rightともに同じ幅にすればOKです。border-left、border-rightともに同じ幅であればOKなのか?下記図をご覧ください。border-leftの幅は「a」です。border-rightの幅も同じなので「a」です。緑の下の辺を底辺としたときの三角形の高さを「h」とします。よって、$b=c$になります。下記のとおり、頂点の1つから対辺に対して垂線をおろすと$30^{\circ}$、$60^{\circ}$、$90^{\circ}$の直角三角形を作れます。すると、辺の長さは下記のような比率になります。いうことで、margin-leftとmargin-bottomの比率が$1:\sqrt{3}$となれば、正三角形が作れます。\sqrt{3}$とすればOKです。346$pxで大丈夫です。0;}</style>きれいな正三角形ができました。ポイント正三角形の特徴から、1辺の半分の長さの$\sqrt{3}$倍がもう1辺になるので、border-left、border-rightはともに同じ幅、かつ、border-bottomをborder-rightの$\sqrt{3}$倍にすればOKです。頂点を左にずらした三角形こちらの図を見てもらうと分かるのですが、border-leftとborder-rightの幅が同じであれば、三角形(緑)の上側の頂点はど真ん中にきます。border-leftの幅の割合を小さくすれば、三角形(緑)の頂点は左にずれます。0;}</style>上側の頂点が左に寄った三角形ができました。ポイントborder-leftとborder-rightの比率を変えるだけで、三角形の1つの頂点の位置をずらすことができます。頂点を右にずらした三角形border-rightの幅の割合を小さくすれば、三角形(緑)の頂点は右にずれます。0;}</style>上側の頂点が右に寄った三角形ができました。ポイントborder-leftとborder-rightの比率を変えるだけで、三角形の1つの頂点の位置をずらすことができます。まとめ各borderに指定した幅を計算して求めたり、どこの長さと紐づいているか把握しておくことで、長くしたり短くしたりすることで、三角形を自由に作ることができます。簡単なアイコンなどはcssで作れるようになると、少し便利そう。