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

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


三角アイコン
See the Pen
CSSだけで、三角アイコンをつくる by 125naroom (@125naroom)
on CodePen.
疑似要素「:before」でテキストの横に三角アイコンをつけています。
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
<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
<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
<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
<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
<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
<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); }
メモ
三角をつくるのにとても便利なサイトさんはこちらです。
書き方を覚えるまではとても活用させていただきました。
さいごに


関連記事
おすすめ
かんれん
Googleさんのおすすめ
人気記事
- web / 2019.4.16
- 【CSS】ハンバーガーメニュー実装サンプル集(クリック時のエフェクトも集めました)
- web / 2022.2.1
- 【jQuery】アコーディオン実装サンプル10選
- web / 2019.9.27
- 【jQuery】スライダープラグイン「slick」実装サンプル集
Googleさんのおすすめ
デザインの記事
- 2023.06.05New
- NEWTOWN/グラフィック・Webデザイン
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2022.06.15
- ちょっと思い出しただけ
- (C)2022『ちょっと思い出しただけ』製作委員会 もくじ 『ちょっと思い出しただけ』 あ…
- いつかのこと – 無印良品の家と暮らす
- 2023.04.25
- 【CSS】見出しデザインをまとめてみる(左右に線を引くとか)
- 見出しのデザインをまとめてくださーい わ、わかりましたー もくじ 左右に線を引く 左…
- 125naroom / デザインするところ(会社)です。