CSSだけで直角二等辺三角形を作る方法

cssだけで三角形を作ることがあるんですが、あまり理解しないまま適当に使っていました。ですので、そろそろ理解して使えるようにしておきたいと思います。

まずは色々な向きの直角二等辺三角形の作り方が分かったので、そちらをメモしておきます。

スポンサーリンク

cssだけで作れる直角二等辺三角形

１～８はいずれも、三角形の大きさは「border」の太さ（※border-width）、色は「border」の色（※border-color）を変更すればOKです。

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

１．右上が$90^{\circ}$になる直角二等辺三角形

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

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

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

２．右下が$90^{\circ}$になる直角二等辺三角形

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

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

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

３．左下が$90^{\circ}$になる直角二等辺三角形

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

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

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

４．左上が$90^{\circ}$になる直角二等辺三角形

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

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

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

５．下が$90^{\circ}$になる直角二等辺三角形

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

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

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

６．左が$90^{\circ}$になる直角二等辺三角形

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

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

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

７．上が$90^{\circ}$になる直角二等辺三角形

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

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

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

８．右が$90^{\circ}$になる直角二等辺三角形

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

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

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

まとめ

思いのほかcssだけで色々な三角形を作れそうです。svgでも作成は可能ですが、三角形であればcssの方がお手軽かもしれないですね。

５～８とかの三角形は割と使える場所は多そうです。▲や▼は普通に文字で書けますが、右向きや左向きの三角は少し特殊なので、より使い道はありそうです。

↓こちらは最近実際に仕事で使ったものです。割と良い感じじゃないですか？(笑)
時間

それでは、最後までお読みいただきありがとうございました！

スポンサーリンク