画像不要！CSSだけで三角形を表現する方法！

こんにちは。最近タピオカを自宅で茹でて食べているのですが、調子に乗ってたくさん食べたら消化不良で腹を下しました。みなさんも体調不良には気を付けましょう。

今日は僕もよく使う、CSSだけで三角形を表現する方法のご紹介です。

こちらのaタグをご覧ください

<a href='https://shima.io' id='shimbaLink'>SHIMBA</a>

何の変哲もない、SHIMBAへリンクするだけのaタグです。

idにshimbaLinkを持っています。

こちらの「SHIMBA」という文字のすぐ後ろに矢印のように三角形を表示させるには、次のようなCSSを設定すると可能になります。

#shimbaLink:after{
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 10px;
  border-color: transparent transparent transparent #000;
}

これだけで、「SHIMBA▶︎」のようにリンク文字の後ろに三角形が出現します！

SCSSでカッコよく書くと次のような感じです。

#shimbaLink
  &:after{
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 10px;
    border-color: transparent transparent transparent #000;
  }
}

ちなみに下のように、:after要素の代わりに:beforeを使うと、「▶︎SHIMBA」文字の前に三角形が出てきます！

#shimbaLink:before{
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 10px;
  border-color: transparent transparent transparent #000;
}

「サイズも色も三角の向きも使いたいのと全然違って参考にならな〜〜〜い！」というあなたには、以下のツールが便利です。

http://apps.eky.hk/css-triangle-generator/

向き、大きさ、色を指定することで、コピペで使える三角系CSSが自動で生成されます！
ここで作成したコードを、上の例達の「width: 0;」以下と置き換えると三角形が出てきます。
グラデーションも指定できるのでとっても便利です。

ブックマーク登録して、タピオカミルクティをすすりながら、素敵なフロントエンド生活をしましょう！