CSSのborderを使って三角形を描画

テキストリンクなどにビュレットマークとして三角形のアイコンをつけて表示させたりすることがあります。通常はさくっと画像を用意してつけたりしますが、この三角マークをCSSだけで表現してみたいと思います。

borderプロパティで三角形を描画

作り方はいたって簡単で、CSSのborderプロパティを使用するだけで三角形を表現することができます。

テキストの前につける

テキストの先頭に三角形のマークをつけるには、以下のようなスタイルシートを記述すると描画することができます。

.list li:before {
  width: 0;
  height: 0;
  content: "";
  display: inline-block;
  border: 6px solid transparent;
  border-left-color: #000;
}

幅と高さを0pxにして、見えないボーダーを引きます。そして、三角形の向きに合わせて好きな色で塗りつぶします。この場合だと、右向きの三角を作るので「border-left-color」でボーダーの左側に色を指定しています。左向きにする場合は右側に、上向きなら下側、下向きなら上側に色をつけるとそれぞれ描画することができます。ボーダーの幅の値を変えれば、三角形の大きさも変えることができます。

こんな感じで三角がつきます

リンクボタンに装飾する

今度は、ボタンの中に三角形を描画してみます。作り方は先程と一緒ですが、要素の後ろにつけたいので「:after」を使って描画します。

.btn li:after{
  width: 0;
  height: 0;
  content: "";
  display: inline-block;
  margin: 2px 0 0 10px;
  border: 6px solid transparent;
  border-left-color: #fff;
}