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;
}

結果

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

三角形

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;
}

結果

最後に

特にありません。