CSSで作る矢印サンプル集

最近は矢印は画像ではなく、基本的にCSSで作る機会がほとんどになってきている。

ただ、毎回コーディングしていてはちょっと非効率だなと思うので再利用できそうなコードをこのページにまとめておくことにしよう。このページに訪れた人も自由にコピペして使って欲しい。

シンプル矢印

See the Pen
bGdKYLe by ニック@大阪のブロガー (@namuraclecent)
on CodePen.

上のみの矢印

See the Pen
BaNVmJj by ニック@大阪のブロガー (@namuraclecent)
on CodePen.

棒なし矢印

See the Pen
dyoKZdr by ニック@大阪のブロガー (@namuraclecent)
on CodePen.

三角の矢印

See the Pen
XWbYzEq by ニック@大阪のブロガー (@namuraclecent)
on CodePen.

丸付きの矢印

See the Pen
test by ニック@大阪のブロガー (@namuraclecent)
on CodePen.

まとめ

ひとまずよく使う矢印アイコンのサンプルをまとめておいた。

また使えそうな矢印アイコンを作ったらここに追記していきたい。