un-Tech

どうもnissyです。
普段CSSコーディングをしていて、borderプロパティを使う機会が多いと思います。
コンテンツの外枠であったり、段落間の境界線であったり。

今回はborderの仕組みを理解して、線や枠でなく、三角形を作りたいと思います。

サンプルコード

<p class="triangle"></p>

.triangle {
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 30px solid #ee4f16;
}

ポイント

■ポイント1
widthとheightの値を0に指定。
上下左右それぞれのボーダーの太さ（border-width）によって、三角形の大きさが決まります。（※三角形の大きさについては後述します。）

■ポイント2
上下左右それぞれのボーダーの色。
上記サンプルコードでは、[上][下][右]のボーダーの色を透明にしています。

仕組み

widthとheightの値を0に指定し、上下左右それぞれのボーダーの色を付けてみました。

.triangle {
  width: 0;
  height: 0;
  border-top: 30px solid #4EA9D5;
  border-right: 30px solid #29c195;
  border-bottom: 30px solid #e49910;
  border-left: 30px solid #ee4f16;
}

上下左右それぞれのボーダーの重なる部分が斜めの境界線を基に分割されています。
この仕様によって三角形を実現させることができます。

では、上記の結果の状態から手順を追って実際に三角形を作っていきます。
左以外のボーダーの色をひとつずつ透明にします。

まず、上ボーダーの色を透明にします。

.triangle {
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-right: 30px solid #29c195;
  border-bottom: 30px solid #e49910;
  border-left: 30px solid #ee4f16;
}

続いて、右ボーダーの色を透明にします。

.triangle {
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 30px solid #e49910;
  border-left: 30px solid #ee4f16;
}

さらに、下ボーダーの色を透明にします。

.triangle {
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 30px solid #ee4f16;
}

三角形が完成しました。

三角形の大きさと形状

三角形の大きさや形状は上下左右のボーダーの太さで決まります。

■[上][右][下]ボーダーの色が透明の場合
三角形の幅：[左]ボーダーの太さ
三角形の高さ：[上下]ボーダーの太さの和

■[右][下][左]ボーダーの色が透明の場合
三角形の幅：[左右]ボーダーの太さの和
三角形の高さ：[上]ボーダーの太さ

■[上][下][左]ボーダーの色が透明の場合
三角形の幅：[右]ボーダーの太さ
三角形の高さ：[上下]ボーダーの太さの和

■[上][右][左]ボーダーの色が透明の場合
三角形の幅：[左右]ボーダーの太さの和
三角形の高さ：[下]ボーダーの太さ

下の場合だと、高さが30px、幅が60pxの三角形となります。

.triangle {
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 60px solid #ee4f16;
}

応用

三角形の作り方を理解したところで、これを利用してリストマーカーを作ってみます。
:before, :after 擬似要素で三角形を作ります。

まずは :before 擬似要素を使用します。

<ul class="list">
  <li class="list-item">ダミーテキスト</li>
  <li class="list-item">ダミーテキスト</li>
</ul>

.list-item {
  position: relative;
  padding-left: 10px;
}
.list-item:before {
  content: '';
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 0;
  height: 0;
  margin-top: -5px;
  border-top: 5px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid #ee4f16;
}

次は :beforeに加えて、 :after 擬似要素も使用し矢印型のリストマーカーを作ります。

.list-item {
  position: relative;
  padding-left: 10px;
}
.list-item:before, .list-item:after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 0;
  width: 0;
  height: 0;
  margin-top: -5px;
  border-top: 5px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid #ee4f16;
}
.list-item:after {
  z-index: 1;
  margin-left: -3px;
  border-left-color: #f8f8f8;
}

まず同じ形の三角形を2つ作ります。
片方の三角形の色を背景の色に合わせます。
この三角形をもう片方の三角形と比べて、少し位置をずらし、前面に配置することで、矢印の形を実現しています。
デモでは、:after 疑似要素を”margin-left: -3px;”で左に3pxずらし、”z-index: 1;”により、前面に配置しました。

まとめ

応用で紹介したような三角形のリストマーカーは実践でも使えそうですね。
CSSで実装することのメリットは、サイズや色の変更が容易になることです。

CSSプロパティの仕様を深く理解することで、より柔軟性をもたせたコーディングができるかと思います。