[css3]cssで矢印を作る！詳しい解説付き！

タイトルの通りです。
「css　矢印」とかでググると色んな矢印がコピペだけで作れてしまうけど、ちょっとカスタマイズしたいときにcssの意味が分かってなきゃっていうちょっとレベルアップして書いてみようかと思ったんだ。連休真っ只中に。

なのでオーソドックスな矢印のみで書いて行きます。

矢印を作る手順

ざっとこんな手順で矢印を作っていきます。

ここでいう「四角を書きます」は実際に四角を書くのではなくボックスを作るという意味です。
ではどうやってボックスを作るかというとcontentプロパティを使ってボックスを作ります。

contentプロパティは:beforeや:afterの擬似要素を使ってコンテンツを挿入するために使います。

See the Pen eZQWQP by mitsuki sagayama (@sagayama) on CodePen.

このようにbeforeやafterで前後にコンテンツを表示することが出来ます。

矢印の場合は表示するものが無いものを作ってあげます。

<div class="ts">
  Tシャツ　1,900円
</div>

このhtmlに対して

.ts:before {
    content:"";
}

とcssを書くことでイメージ的には「Tシャツ　1,900円」の前に空のボックスが出来たと思ってください。

作った空のボックスにborderプロパティを使って線を書いていきます。
今回は右向きの矢印を作成します。
同時にブロックレベル要素にしサイズを指定します。今回は幅、高さ6pxにしました。

See the Pen jqQmRz by mitsuki sagayama (@sagayama) on CodePen.

ここでカスタマイズできるのは矢印の色と大きさです。
矢印自体の大きさはwidth、heightで指定し太さはborderの2pxで、色はborderの#000を変更すれば大丈夫。

右上を向いた矢印みたいな鍵カッコみたいなものが出来ていると思います。
次はこれを時計回りに45度回転させます。

See the Pen bpQRqM by mitsuki sagayama (@sagayama) on CodePen.

以上で矢印の出来上がり。

ここまでで分かるように矢印の方向が変わるとborderを取る場所(border-top or right or bottom or left)が変わったりtransform:rotateの角度が変わったりします。

今回は「Tシャツ　1,900円」の前に矢印を配置します。

See the Pen EKOXwj by mitsuki sagayama (@sagayama) on CodePen.

positionプロパティで位置を確定していきますが、ポイントは上下中央を取る時のmargin-top:-3px;というネガティブマージンくらいです。

以上で全てが完了です。

だらだらと長い矢印のcssも整理して見ていくと全く難しいところはないですね。
実は後ろに矢印を後ろに持っていきたいからといって:afterにする必要もなくleft:0;をright:0;に変更してあげるだけなんですね。
どんどん活用して無駄な矢印画像アイコンは減らして行きましょう！

※CODEPENの設定をSCSSのままCSSを書いてますが気にしないでください・・・