CSSで矢印アイコン

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

CSSを使って簡易にアイコンやアニメーションを作成できると、データ容量を極限まで抑えることが可能になります。
 

今回は、比較的画像アイコンを使いがちな矢印アイコンを作成してみました。
 

画像を使わない場合「→」のようにフォントを使いがちですが、これは2バイトフォントであり、グローバルなサイトでは、文字化けを引き起こしてしまいます。
 

スマートなサイト構築を考えると、CSSまたは、SVGでの表示が望ましいでしょうね。

サンプル表示

ソースコード

解説

「arrow」classは、では、矢印の付け根部分を正方形で表示しています。
 

付随するclassで「up,down,left,right」として、after擬似要素として、三角形を作り出しています。
色を単色にする事で1つのアイコン表示にしているので、色変更をする場合は、同時に行なってください。
 

また、矢印の配置は、基本要素のrelative、after要素のabsoluteで指定してあり、それぞれ、100%,-50%などで、いい具合に調整しています。
 

三角形の表示ポイントは、向きの反対側のborderに色を設置し、その両側をtransparentにする事で、表現できます。
 

なれると、自分で三角を作って、矢印アイコンになるように設置できるようになると思います。
 

少し工夫すれば、斜めアイコンなども可能になるでしょうね。簡易に行う場合は、一つだけ矢印を作って、”transform:rotate(**deg);”で、回転させるという手もありますね。
 

お好きなやり方でどうぞ。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です