【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); }
メモ
三角をつくるのにとても便利なサイトさんはこちらです。
書き方を覚えるまではとても活用させていただきました。
さいごに


関連記事
おすすめ
かんれん
- web / 2019.9.26
- 【CSS】input、textareaのCSSを初期化する(iOS対策)
- web / 2020.10.27
- 【CSS】tableをレスポンシブ対応する、2列を1列に切り替える
- web / 2020.10.28
- 【CSS】注釈(※、*1)を記載するときのインデント合わせ(頭合わせ)
- web / 2021.8.20
- 【CSS】打ち消し線(delタグ)をカスタマイズする
Googleさんのおすすめ
人気記事
- web / 2019.4.16
- 【CSS】ハンバーガーメニュー実装サンプル集(クリック時のエフェクトも集めました)
- web / 2019.9.27
- 【jQuery】スライダープラグイン「slick」実装サンプル集
- web / 2022.2.1
- 【jQuery】アコーディオン実装サンプル10選
- web / 2021.9.17
- 【jQuery】ページ内リンクでスムーズスクロール(スクロール位置の調整も簡単にできる)
Googleさんのおすすめ
デザインの記事
- 2022.07.01New
- MEJINAVI2022|目白大学がまるっとわかるメジナビ
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2022.07.01New
- MEJINAVI2022|目白大学がまるっとわかるメジナビ
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2022.06.15
- ちょっと思い出しただけ
- (C)2022『ちょっと思い出しただけ』製作委員会 もくじ 『ちょっと思い出しただけ』 あ…
- いつかのこと – 無印良品の家と暮らす
- 2022.06.04
- 『点』、登場人物は3人だけ
- (C)2017 WARNER MUSIC JAPAN INC. もくじ 『点』 登場人物は3人だけ なんとも心地よい …
- いつかのこと – 無印良品の家と暮らす