Sponser Link
cssでここまで出来るといちいち画像作る必要ないですね。
Sponser Link
目次
ダウンロード
Sponser Link
使用方法
共通HTML
<a href="#" class="arrow">共通のHTML</a>
共通CSS
.arrow{ position: relative; display: inline-block; padding: 0 0 0 16px; color: #000; vertical-align: middle; text-decoration: none; font-size: 15px; } .arrow::before, .arrow::after{ position: absolute; top: 0; bottom: 0; left: 0; margin: auto; content: ""; vertical-align: middle; }
ここまで書いてから、それぞれの矢印のHTML&CSSを
追加して書いて行きます。
.arrow
.arrow で矢印位置をabsoluteで指定するので、
基準となるposition:relativeが書かれています。
また、padding:0 0 0 16px で 矢印を入れるスペースを作っています。
.arrow::before,.arrow::after
矢印位置をテキストの前(左)に指定しています。
beforeとafterを組み合わせて矢印を作るので、
2つとも同じ位置に重なっています。
矢印のHTML&CSS
See the Pen
MWwZEwv by studio-0 (@studio-0)
on CodePen.
sample5-8の矢印を作ってみました。
HTMLにsample5-8クラスを追加し、
CSSにsample5-8のcssを追加します。
HTML
<a href="#" class="arrow sample5-8"> くの字の矢印アイコン(四角枠) </a>
CSS
.sample5-8::before{ box-sizing: border-box; width: 12px; height: 12px; border: 1px solid #7a0; } .sample5-8::after{ left: 3px; width: 3px; height: 3px; border-top: 1px solid #7a0; border-right: 1px solid #7a0; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
CSSの解説
beforeで外枠の四角を作っています。
afterでくの字の矢印を作っています。
3pxの四角を作って上と右にボーダーを作り、
45度傾けて『>』の字を作っています。
他の矢印を作るときにも、
HTMLに矢印のクラスを追加し、
そのCSSを追加する方法で画像を作らずに
簡単に矢印を表示することができますよ。
See the Pen
WNvYVgr by studio-0 (@studio-0)
on CodePen.
大きさと色を変えてみました。
こんな風にアレンジ可能です!
Sponser Link