CSSだけで三角形を作る方法？とことん検証！

cssだけで三角形を作ることが可能です。以前、直角二等辺三角形や正三角形を作る方法を書いています。

三角形はオブジェクトの幅、高さともに 0のときのborderの特性を利用して作ります。それがいったいどのような仕組みだったかを理解することで、作りたい三角形を作ることができるようになります。

それでは、いろいろな組み合わせを検証して理解を深めていきたいと思います。

スポンサーリンク

１．各borderの幅を同じにする

• 幅、高さを0にする
• 各borderの幅を統一する

<div class="border1-1"></div>
<style>
.border1-1 {
  border: 100px solid blue; 
  height: 0;
  width: 0;
}
</style>

正方形ができました。

各borderの色を別々にしてみる

<div class="border1-2"></div>
<style>
.border1-2 {
  border-top: 100px solid red; 
  border-right: 100px solid blue;
  border-bottom: 100px solid yellow; 
  border-left: 100px solid green; 
  height: 0;
  width: 0;
}
</style>

それぞれのborderは二等辺三角形になっていることが分かります。

どれか1つ以外を透明（transparent）にすれば二等辺三角形を作れますね。

また、2つ組み合わせても直角二等辺三角形が作れそうです。例えば、border-top（赤）とborder-right（青）を組み合わせれば、直角二等辺三角形も作れますね。同じように上（赤）と左（緑）、下（黄）と右（青）、下（黄）と左（緑）でも直角二等辺三角形が作れます。

borderの幅はどこの長さ？（共通です）

borderで作られた四角形の1辺が 200pxでした。つまり、四角形の各辺を底辺とした時の三角形の高さがborderの幅となります。borderの幅がどこに影響してくるか把握しておくと、思ったとおりの三角形を作るのに役立ちそうです。

２．各borderの幅をバラバラにする（0以外）

• 幅、高さを0にする
• 各borderの幅をバラバラにする（0以外）

<div class="border2-1"></div>
<style>
.border2-1 {
  border-top: 50px solid blue; 
  border-right: 100px solid blue;
  border-bottom: 150px solid blue; 
  border-left: 200px solid blue; 
  height: 0;
  width: 0;
}
</style>

長方形ができました。

各borderの色を別々にしてみる

<div class="border2-2"></div>
<style>
.border2-2 {
  border-top: 50px solid red; 
  border-right: 100px solid blue;
  border-bottom: 150px solid yellow; 
  border-left: 200px solid green; 
  height: 0;
  width: 0;
}
</style>

それぞれのborderはいろいろな形の三角形になっていることが分かります。

どれか1つ以外を透明（transparent）にすればいろいろな形の三角形が作れますね。

３．borderの幅を１つだけ変える（0以外）

• 幅、高さを0にする
• borderの幅を１つだけ変える（0以外）

３－１．border-topの幅だけ変える

• 幅、高さを0にする
• border-topの幅だけ変える

<div class="border3-1-1"></div>
<style>
.border3-1-1 {
  border-top: 50px solid blue; 
  border-right: 100px solid blue;
  border-bottom: 100px solid blue; 
  border-left: 100px solid blue; 
  height: 0;
  width: 0;
}
</style>

長方形ができました。

各borderの色を別々にしてみる

<div class="border3-1-2"></div>
<style>
.border3-1-2 {
  border-top: 50px solid red; 
  border-right: 100px solid blue;
  border-bottom: 100px solid yellow; 
  border-left: 100px solid green; 
  height: 0;
  width: 0;
}
</style>

それぞれのborderはいろいろな形の三角形になっていることが分かります。

どれか1つ以外を透明（transparent）にすればいろいろな形の三角形が作れますね。上（赤）と下（黄）は二等辺三角形ですね。

３－２．border-rightの幅だけ変える

• 幅、高さを0にする
• border-rightの幅だけ変える

<div class="border3-2-1"></div>
<style>
.border3-2-1 {
  border-top: 100px solid blue; 
  border-right: 50px solid blue;
  border-bottom: 100px solid blue; 
  border-left: 100px solid blue; 
  height: 0;
  width: 0;
}
</style>

長方形ができました。

各borderの色を別々にしてみる

<div class="border3-2-2"></div>
<style>
.border3-2-2 {
  border-top: 100px solid red; 
  border-right: 50px solid blue;
  border-bottom: 100px solid yellow; 
  border-left: 100px solid green; 
  height: 0;
  width: 0;
}
</style>

それぞれのborderはいろいろな形の三角形になっていることが分かります。

どれか1つ以外を透明（transparent）にすればいろいろな形の三角形が作れますね。右（青）と左（緑）は二等辺三角形ですね。

３－３．border-bottomの幅だけ変える

• 幅、高さを0にする
• border-bottomの幅だけ変える

<div class="border3-3-1"></div>
<style>
.border3-3-1 {
  border-top: 100px solid blue; 
  border-right: 100px solid blue;
  border-bottom: 50px solid blue; 
  border-left: 100px solid blue; 
  height: 0;
  width: 0;
}
</style>

長方形ができました。

各borderの色を別々にしてみる

<div class="border3-3-2"></div>
<style>
.border3-3-2 {
  border-top: 100px solid red; 
  border-right: 100px solid blue;
  border-bottom: 50px solid yellow; 
  border-left: 100px solid green; 
  height: 0;
  width: 0;
}
</style>

それぞれのborderはいろいろな形の三角形になっていることが分かります。

どれか1つ以外を透明（transparent）にすればいろいろな形の三角形が作れますね。上（赤）と下（黄）は二等辺三角形ですね。

３－４．border-leftの幅だけ変える

• 幅、高さを0にする
• border-leftの幅だけ変える

<div class="border3-4-1"></div>
<style>
.border3-4-1 {
  border-top: 100px solid blue; 
  border-right: 100px solid blue;
  border-bottom: 100px solid blue; 
  border-left: 50px solid blue; 
  height: 0;
  width: 0;
}
</style>

長方形ができました。

各borderの色を別々にしてみる

<div class="border3-4-2"></div>
<style>
.border3-4-2 {
  border-top: 100px solid red; 
  border-right: 100px solid blue;
  border-bottom: 100px solid yellow; 
  border-left: 50px solid green; 
  height: 0;
  width: 0;
}
</style>

それぞれのborderはいろいろな形の三角形になっていることが分かります。

どれか1つ以外を透明（transparent）にすればいろいろな形の三角形が作れますね。右（青）と左（緑）は二等辺三角形ですね。

４．borderの幅を２つだけ変える（0以外）

• 幅、高さを0にする
• borderの幅を２つだけ変える（0以外）

４－１．borderの幅を２つだけ同じ値に変える（0以外）

４－１ー１．border-top、border-rightの幅を変える

• 幅、高さを0にする
• border-top、border-rightの幅を変える

<div class="border4-1-1-1"></div>
<style>
.border4-1-1-1 {
  border-top: 50px solid blue; 
  border-right: 50px solid blue;
  border-bottom: 100px solid blue; 
  border-left: 100px solid blue; 
  height: 0;
  width: 0;
}
</style>

長方形ができました。

各borderの色を別々にしてみる

<div class="border4-1-1-2"></div>
<style>
.border4-1-1-2 {
  border-top: 50px solid red; 
  border-right: 50px solid blue;
  border-bottom: 100px solid yellow; 
  border-left: 100px solid green; 
  height: 0;
  width: 0;
}
</style>

それぞれのborderはいろいろな形の三角形になっていることが分かります。

どれか1つ以外を透明（transparent）にすればいろいろな形の三角形が作れますね。

４－１ー２．border-top、border-bottomの幅を変える

• 幅、高さを0にする
• border-top、border-bottomの幅を変える

<div class="border4-1-2-1"></div>
<style>
.border4-1-2-1 {
  border-top: 50px solid blue; 
  border-right: 100px solid blue;
  border-bottom: 50px solid blue; 
  border-left: 100px solid blue; 
  height: 0;
  width: 0;
}
</style>

長方形ができました。

各borderの色を別々にしてみる

<div class="border4-1-2-2"></div>
<style>
.border4-1-2-2 {
  border-top: 50px solid red; 
  border-right: 100px solid blue;
  border-bottom: 50px solid yellow; 
  border-left: 100px solid green; 
  height: 0;
  width: 0;
}
</style>

それぞれのborderはいろいろな形の三角形になっていることが分かります。

どれか1つ以外を透明（transparent）にすれば高さの違う二等辺三角形が作れますね。

また、2つ組み合わせても直角二等辺三角形が作れそうです。例えば、border-top（赤）とborder-right（青）を組み合わせれば、直角二等辺三角形も作れますね。同じように上（赤）と左（緑）、下（黄）と右（青）、下（黄）と左（緑）でも直角二等辺三角形が作れます。

４－１ー３．border-top、border-leftの幅を変える

• 幅、高さを0にする
• border-top、border-leftの幅を変える

<div class="border4-1-3-1"></div>
<style>
.border4-1-3-1 {
  border-top: 50px solid blue; 
  border-right: 100px solid blue;
  border-bottom: 100px solid blue; 
  border-left: 50px solid blue; 
  height: 0;
  width: 0;
}
</style>

長方形ができました。

各borderの色を別々にしてみる

<div class="border4-1-3-2"></div>
<style>
.border4-1-3-2 {
  border-top: 50px solid red; 
  border-right: 100px solid blue;
  border-bottom: 100px solid yellow; 
  border-left: 50px solid green; 
  height: 0;
  width: 0;
}
</style>

それぞれのborderはいろいろな形の三角形になっていることが分かります。

どれか1つ以外を透明（transparent）にすればいろいろな形の三角形が作れますね。

４－１ー４．border-right、border-bottomの幅を変える

• 幅、高さを0にする
• border-right、border-bottomの幅を変える

<div class="border4-1-4-1"></div>
<style>
.border4-1-4-1 {
  border-top: 100px solid blue; 
  border-right: 50px solid blue;
  border-bottom: 50px solid blue; 
  border-left: 100px solid blue; 
  height: 0;
  width: 0;
}
</style>

長方形ができました。

各borderの色を別々にしてみる

<div class="border4-1-4-2"></div>
<style>
.border4-1-4-2 {
  border-top: 100px solid red; 
  border-right: 50px solid blue;
  border-bottom: 50px solid yellow; 
  border-left: 100px solid green; 
  height: 0;
  width: 0;
}
</style>

それぞれのborderはいろいろな形の三角形になっていることが分かります。

どれか1つ以外を透明（transparent）にすればいろいろな形の三角形が作れますね。

４－１ー５．border-right、border-leftの幅を変える

• 幅、高さを0にする
• border-right、border-leftの幅を変える

<div class="border4-1-5-1"></div>
<style>
.border4-1-5-1 {
  border-top: 100px solid blue; 
  border-right: 50px solid blue;
  border-bottom: 100px solid blue; 
  border-left: 50px solid blue; 
  height: 0;
  width: 0;
}
</style>

長方形ができました。

各borderの色を別々にしてみる

<div class="border4-1-5-2"></div>
<style>
.border4-1-5-2 {
  border-top: 100px solid red; 
  border-right: 50px solid blue;
  border-bottom: 100px solid yellow; 
  border-left: 50px solid green; 
  height: 0;
  width: 0;
}
</style>

それぞれのborderはいろいろな形の三角形になっていることが分かります。

どれか1つ以外を透明（transparent）にすれば高さの違う二等辺三角形が作れますね。

また、2つ組み合わせても直角二等辺三角形が作れそうです。例えば、border-top（赤）とborder-right（青）を組み合わせれば、直角二等辺三角形も作れますね。同じように上（赤）と左（緑）、下（黄）と右（青）、下（黄）と左（緑）でも直角二等辺三角形が作れます。

４－１ー６．border-bottom、border-leftの幅を変える

• 幅、高さを0にする
• border-bottom、border-leftの幅を変える

<div class="border4-1-6-1"></div>
<style>
.border4-1-6-1 {
  border-top: 100px solid blue; 
  border-right: 100px solid blue;
  border-bottom: 50px solid blue; 
  border-left: 50px solid blue; 
  height: 0;
  width: 0;
}
</style>

長方形ができました。

各borderの色を別々にしてみる

<div class="border4-1-6-2"></div>
<style>
.border4-1-6-2 {
  border-top: 100px solid red; 
  border-right: 100px solid blue;
  border-bottom: 50px solid yellow; 
  border-left: 50px solid green; 
  height: 0;
  width: 0;
}
</style>

それぞれのborderはいろいろな形の三角形になっていることが分かります。

どれか1つ以外を透明（transparent）にすればいろいろな形の三角形が作れますね。

４－２．borderの幅を２つだけバラバラな値に変える（0以外）

４－２ー１．border-top、border-rightの幅を変える

• 幅、高さを0にする
• border-top、border-rightの幅を変える

<div class="border4-2-1-1"></div>
<style>
.border4-2-1-1 {
  border-top: 50px solid blue; 
  border-right: 150px solid blue;
  border-bottom: 100px solid blue; 
  border-left: 100px solid blue; 
  height: 0;
  width: 0;
}
</style>

長方形ができました。

各borderの色を別々にしてみる

<div class="border4-2-1-2"></div>
<style>
.border4-2-1-2 {
  border-top: 50px solid red; 
  border-right: 150px solid blue;
  border-bottom: 100px solid yellow; 
  border-left: 100px solid green; 
  height: 0;
  width: 0;
}
</style>

それぞれのborderはいろいろな形の三角形になっていることが分かります。

どれか1つ以外を透明（transparent）にすればいろいろな形の三角形が作れますね。

４－２ー２．border-top、border-bottomの幅を変える

• 幅、高さを0にする
• border-top、border-bottomの幅を変える

<div class="border4-2-2-1"></div>
<style>
.border4-2-2-1 {
  border-top: 50px solid blue; 
  border-right: 100px solid blue;
  border-bottom: 150px solid blue; 
  border-left: 100px solid blue; 
  height: 0;
  width: 0;
}
</style>

長方形ができました。

各borderの色を別々にしてみる

<div class="border4-2-2-2"></div>
<style>
.border4-2-2-2 {
  border-top: 50px solid red; 
  border-right: 100px solid blue;
  border-bottom: 150px solid yellow; 
  border-left: 100px solid green; 
  height: 0;
  width: 0;
}
</style>

それぞれのborderはいろいろな形の三角形になっていることが分かります。

どれか1つ以外を透明（transparent）にすればいろいろな形の三角形が作れますね。上（赤）と下（黄）で高さの違う二等辺三角形が作れますね。

４－２ー３．border-top、border-leftの幅を変える

• 幅、高さを0にする
• border-top、border-leftの幅を変える

<div class="border4-2-3-1"></div>
<style>
.border4-2-3-1 {
  border-top: 50px solid blue; 
  border-right: 100px solid blue;
  border-bottom: 100px solid blue; 
  border-left: 150px solid blue; 
  height: 0;
  width: 0;
}
</style>

長方形ができました。

各borderの色を別々にしてみる

<div class="border4-2-3-2"></div>
<style>
.border4-2-3-2 {
  border-top: 50px solid red; 
  border-right: 100px solid blue;
  border-bottom: 100px solid yellow; 
  border-left: 150px solid green; 
  height: 0;
  width: 0;
}
</style>

それぞれのborderはいろいろな形の三角形になっていることが分かります。

どれか1つ以外を透明（transparent）にすればいろいろな形の三角形が作れますね。

４－２ー４．border-right、border-bottomの幅を変える

• 幅、高さを0にする
• border-right、border-bottomの幅を変える

<div class="border4-2-4-1"></div>
<style>
.border4-2-4-1 {
  border-top: 100px solid blue; 
  border-right: 50px solid blue;
  border-bottom: 150px solid blue; 
  border-left: 100px solid blue; 
  height: 0;
  width: 0;
}
</style>

長方形ができました。

各borderの色を別々にしてみる

<div class="border4-2-4-2"></div>
<style>
.border4-2-4-2 {
  border-top: 100px solid red; 
  border-right: 50px solid blue;
  border-bottom: 150px solid yellow; 
  border-left: 100px solid green; 
  height: 0;
  width: 0;
}
</style>

それぞれのborderはいろいろな形の三角形になっていることが分かります。

どれか1つ以外を透明（transparent）にすればいろいろな形の三角形が作れますね。

４－２ー５．border-right、border-leftの幅を変える

• 幅、高さを0にする
• border-right、border-leftの幅を変える

<div class="border4-2-5-1"></div>
<style>
.border4-2-5-1 {
  border-top: 100px solid blue; 
  border-right: 50px solid blue;
  border-bottom: 100px solid blue; 
  border-left: 150px solid blue; 
  height: 0;
  width: 0;
}
</style>

長方形ができました。

各borderの色を別々にしてみる

<div class="border4-2-5-2"></div>
<style>
.border4-2-5-2 {
  border-top: 100px solid red; 
  border-right: 50px solid blue;
  border-bottom: 100px solid yellow; 
  border-left: 150px solid green; 
  height: 0;
  width: 0;
}
</style>

それぞれのborderはいろいろな形の三角形になっていることが分かります。

どれか1つ以外を透明（transparent）にすればいろいろな形の三角形が作れますね。右（青）と左（緑）で高さの違う二等辺三角形が作れますね。

４－２ー６．border-bottom、border-leftの幅を変える

• 幅、高さを0にする
• border-bottom、border-leftの幅を変える

<div class="border4-2-6-1"></div>
<style>
.border4-2-6-1 {
  border-top: 100px solid blue; 
  border-right: 100px solid blue;
  border-bottom: 50px solid blue; 
  border-left: 150px solid blue; 
  height: 0;
  width: 0;
}
</style>

長方形ができました。

各borderの色を別々にしてみる

<div class="border4-2-6-2"></div>
<style>
.border4-2-6-2 {
  border-top: 100px solid red; 
  border-right: 100px solid blue;
  border-bottom: 50px solid yellow; 
  border-left: 150px solid green; 
  height: 0;
  width: 0;
}
</style>

それぞれのborderはいろいろな形の三角形になっていることが分かります。

どれか1つ以外を透明（transparent）にすればいろいろな形の三角形が作れますね。

まとめ

これで一通り確認できたかと思います。ちなみに三角形を作るには、不要なborderの色（border-color）をtransparentにすればOKです。実際に作ったパターンはこちらの直角二等辺三角形や正三角形を作る方法を合わせてみていただければと思います。

さて、ざっくりとした仕組みはなんとなく分かりましたので、特徴をまとめておきます。

• borderの上下左右の1つだけ色を付け、それ以外を透明（transparent）にすると、いろいろな形の三角形が作れる
• borderの上下の幅を同じ、かつ、左右の幅も同じにすると、2つ組み合わせると直角三角形が作れる
• borderの左右の幅を同じにすると、上下のborderで二等辺三角形が作れる
• borderの上下の幅が同じにすると、左右のborderで二等辺三角形が作れる

この特徴以外でもborderの幅の設定の仕方を計算して対応すれば、想像した三角形を作ることができそうですが、それはまたの機会に。

スポンサーリンク