borderは要素の枠線のスタイルを指定するプロパティです。

今回はborderプロパティのスタイルを確認しながら、borderプロパティを使用して三角形を作成します。

borderのスタイル

図形を作成する前に border プロパティを指定するとどのように見えるのかを確認します。

基本

枠線を太くする

HTML

<div class="box border"></div>

CSS

.box {
  height: 100px;
  width: 100px;
}

.border {
  border: 20px solid #ff9158;
}

結果

各辺の指定

各辺に別々の色を指定します。

HTML

<div class="box border_side"></div>

CSS

.box {
  height: 100px;
  width: 100px;
}

.border_side {
  border-top: 20px solid red;
  border-left: 20px solid blue;
  border-right: 20px solid yellow;
  border-bottom: 20px solid green;
}

結果

要素の大きさをゼロにする

要素の大きさをゼロにします。

HTML

<div class="box_nan border_side"></div>

CSS

.box_nan {
  height: 0px;
  width: 0px;
}

.border_side {
  border-top: 20px solid red;
  border-left: 20px solid blue;
  border-right: 20px solid yellow;
  border-bottom: 20px solid green;
}

結果

上下左右の各辺が三角形になるのが確認出来ました。

2つの三角形

上下左右の枠線が三角形になりましたが、更にboderについて確認します。

border-widthプロパティ

border-width プロパティを使用して三角形を作成します。
ます、border-width の指定方法は以下の通りです。

border-width top(上) right(右) bottom(下) left(左)

パターン別2つの三角形

以下のパターンの通り、枠線を使用した2つの三角形を確認します。
ここで分かるのが、2辺があれば三角形が表示されるという事です。また指定されない2辺と被る領域は削除されるので、この例では25pxの2等辺三角形になります。

HTML

<div class="box_nan two_triangle_top_right"></div>
<div class="box_nan two_triangle_top_left"></div>
<div class="box_nan two_triangle_bottom_right"></div>
<div class="box_nan two_triangle_bottom_left"></div>

CSS

.box_nan {
  height: 0px;
  width: 0px;
}

.two_triangle_top_right {
  border-color: red blue yellow green;
  border-width: 50px 50px 0 0;
  border-style: solid;
}

.two_triangle_top_left {
  border-color: red blue yellow green;
  border-width: 50px 0 0 50px;
  border-style: solid;
}

.two_triangle_bottom_right {
  border-color: red blue yellow green;
  border-width: 0 50px 50px 0;
  border-style: solid;
}

.two_triangle_bottom_left {
  border-color: red blue yellow green;
  border-width: 0 0 50px 50px;
  border-style: solid;
}

結果

3つの三角形

今度は3つの三角形を作成してみます。

HTML

<div class="box_nan three_triangle_top_right_bottom"></div>
<div class="box_nan three_triangle_top_right_left"></div>
<div class="box_nan three_triangle_top_left_bottom"></div>
<div class="box_nan three_triangle_right_bottom_left"></div>

CSS

.box_nan {
  height: 0px;
  width: 0px;
}

.three_triangle_top_right_bottom {
  border-color: red blue yellow green;
  border-width: 50px 50px 50px 0;
  border-style: solid;
}

.three_triangle_top_right_left {
  border-color: red blue yellow green;
  border-width: 50px 50px 0 50px;
  border-style: solid;
}

.three_triangle_top_left_bottom {
  border-color: red blue yellow green;
  border-width: 50px 0 50px 50px;
  border-style: solid;
}

.three_triangle_right_bottom_left {
  border-color: red blue yellow green;
  border-width: 0 50px 50px 50px;
  border-style: solid;
}

結果

これでboderのスタイルが確認出来たので、これを利用して三角形を作成します。

三角形

borderプロパティを動作を確認したところで三角形を作成してみます。
各辺が三角形になった事が確認出来たので、任意の1辺についてborderを指定し、その他の辺を透明にすると三角形が出来ます。

透明にするには transparent を使用します。transparentについては以下を参考にして下さい。

参考

【CSS】transparent

HTML

<div class="box_nan border_top"></div>
<div class="box_nan border_left"></div>
<div class="box_nan border_right"></div>
<div class="box_nan border_bottom"></div>

CSS

.box_nan {
  height: 0px;
  width: 0px;
}

.border_top {
  border: 20px solid transparent;
  border-top: 20px solid red;
}

.border_left {
  border: 20px solid transparent;
  border-left: 20px solid blue;
}

.border_right {
  border: 20px solid transparent;
  border-right: 20px solid yellow;
}

.border_bottom {
  border: 20px solid transparent;
  border-bottom: 20px solid green;
}

結果

様々な三角形

色々な三角形を作成出来ます。

HTML

<div class="box_nan right"></div>
<div class="box_nan top"></div>
<div class="box_nan left"></div>
<div class="box_nan bottom"></div>

CSS

.box_nan {
  height: 0px;
  width: 0px;
}

.right {
  border-color: transparent blue transparent transparent;
  border-width: 30px 80px 10px 0;
  border-style: solid;
}

.top {
  border-color: red transparent transparent transparent;
  border-width: 70px 30px 0 10px;
  border-style: solid;
}

.left {
  border-color: transparent transparent transparent green;
  border-width: 10px 0 40px 70px;
  border-style: solid;
}

.bottom {
  border-color: transparent transparent yellow transparent;
  border-width: 0 10px 70px 40px;
  border-style: solid;
}

結果

最後に

特にありません。