なんにもない日の頭の中はこんなもんだったりする

【CSS】三角アイコンと矢印アイコンをつくる

  • 2019.1.22
【CSS】三角アイコンと矢印アイコンをつくる

シンプルに疑似要素の「:before」「:after」でつくる。
色も大きさも自由に変更できるので便利。
border-radiusで角丸にするのも簡単。

きのこさん
画像は使わないんですか?
きのこさん
CSSだけで簡単にできますよー

三角アイコン

See the Pen
CSSだけで、三角アイコンをつくる
by 125naroom (@125naroom)
on CodePen.

疑似要素「:before」でテキストの横に三角アイコンをつけています。

HTMLとCSSはこちら

HTML

<a href="#" class="arrow_s">三角アイコン</a>

CSS

.arrow_s {
  position: relative;
  display: inline-block;
  padding-left: 12px;
  color: #333;
  text-decoration: none;
}
.arrow_s:before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 8px;
  border-color: transparent transparent transparent #333;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -6px;
}

三角アイコン(丸背景あり)

See the Pen
CSSだけで、三角アイコン(丸背景あり)をつくる
by 125naroom (@125naroom)
on CodePen.

疑似要素「:after」で丸背景をつけています。
「:before」で三角、「:after」で丸背景で、三角アイコン(丸背景あり)になります。

HTMLとCSSはこちら

HTML

<a href="#" class="arrow_s_b">三角アイコン(丸背景あり)</a>

CSS

.arrow_s_b {
  position: relative;
  display: inline-block;
  padding-left: 22px;
  color: #333;
  text-decoration: none;
}
.arrow_s_b:before {
  content: '';
  width: 18px;
  height: 18px;
  background: #333;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -9px;
}
.arrow_s_b:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 50%;
  left: 6px;
  margin-top: -4px;
}

矢印アイコン(右向き)

See the Pen
CSSだけで、矢印アイコン(右向き)をつくる
by 125naroom (@125naroom)
on CodePen.

疑似要素「:before」を使って矢印を作ります。
三角アイコンとは違って少し難しいですが慣れてしまえばいろんな形になるのでおすすめです。

HTMLとCSSはこちら

HTML

<a href="#" class="arrow_r">矢印アイコン(右向き)</a>

CSS

.arrow_r {
  position: relative;
  display: inline-block;
  padding-left: 20px;
  color: #333;
  text-decoration: none;
}
.arrow_r:before {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px #333;
  border-right: solid 2px #333;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -4px;
  transform: rotate(45deg);
}

矢印アイコン(左向き)

See the Pen
CSSだけで、矢印アイコン(左向き)
by 125naroom (@125naroom)
on CodePen.

HTMLとCSSはこちら

HTML

<a href="#" class="arrow_l">矢印アイコン(左向き)</a>

CSS

.arrow_l {
  position: relative;
  display: inline-block;
  padding-left: 20px;
  color: #333;
  text-decoration: none;
}
.arrow_l:before {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px #333;
  border-left: solid 2px #333;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -4px;
  transform: rotate(-45deg);
}

矢印アイコン(上向き)

See the Pen
CSSだけで、矢印アイコン(上向き)をつくる
by 125naroom (@125naroom)
on CodePen.

HTMLとCSSはこちら

HTML

<a href="#" class="arrow_o">矢印アイコン(上向き)</a>

CSS

.arrow_o {
  position: relative;
  display: inline-block;
  padding-left: 20px;
  color: #333;
  text-decoration: none;
}
.arrow_o:before {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px #333;
  border-right: solid 2px #333;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -4px;
  transform: rotate(-45deg);
}

矢印アイコン(下向き)

See the Pen
CSSだけで、矢印アイコン(下向き)をつくる
by 125naroom (@125naroom)
on CodePen.

HTMLとCSSはこちら

HTML

<a href="#" class="arrow_u">矢印アイコン(下向き)</a>

CSS

.arrow_u {
  position: relative;
  display: inline-block;
  padding-left: 20px;
  color: #333;
  text-decoration: none;
}
.arrow_u:before {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-bottom: solid 2px #333;
  border-right: solid 2px #333;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -6px;
  transform: rotate(45deg);
}

矢印アイコン(丸背景あり)

See the Pen
CSSだけで、矢印アイコン(丸背景あり)をつくる
by 125naroom (@125naroom)
on CodePen.

疑似要素「:after」で丸背景をつけています。
「:before」で矢印、「:after」で丸背景で、矢印アイコン(丸背景あり)になります。

HTMLとCSSはこちら

HTML

<a href="#" class="arrow_r_b">矢印アイコン(丸背景あり)</a>

CSS

.arrow_r_b {
  position: relative;
  display: inline-block;
  padding-left: 20px;
  color: #333;
  text-decoration: none;
}
.arrow_r_b:before {
  content: '';
  width: 18px;
  height: 18px;
  background: #333;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: -3px;
  margin-top: -9px;
}
.arrow_r_b:after {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -4px;
  transform: rotate(45deg);
}

メモ

三角をつくるのにとても便利なサイトさんはこちらです。
書き方を覚えるまではとても活用させていただきました。

CSS三角形作成ツール

さいごに

きのこさん
色も変えれますか?
きのこさん
色も大きさも簡単に変えられますよー

関連記事

【CSS】シンプルなボタンデザイン実装サンプル集

【CSS】レスポンシブ対応の三角形を作る

Web design gallery - デザインのこと - ウェブデザインあつめました。
いつかのこと

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

ぼくと、シンカリオン/特集「の、こと」 – いつかのこと
映画『マチネの終わりに』公式サイト
もうすぐ1年/窓の家と生活
12月7日