cssのみでリンクアイコンを作成する3つの方法

Webサイトの表現でリンク箇所を明示するためによく使われる表現としてひらがなの「く」を左右反転したようなアイコンがよく使用されます。

これをCSSのみで再現する方法を3つ紹介します。

テキストの「＞」を用いて表現する

See the Pen link01 by tetsuro (@tetsuro) on CodePen.

もっとも簡単な方法であるが、OSやブラウザに設定されているフォントによって形が変わってしまう場合があり、デザイナーの意図と異なる表現になることも多いのであまり使用しませんが、簡易的に使用する場合があります。

正方形を45度回転させ、２辺のボーダーを用いて表現する

See the Pen link02 by tetsuro (@tetsuro) on CodePen.

辺の長さや太さなどを任意に設定できるため表現の幅も広く、使用頻度は最も多いです。

欠点としてはボーダーを利用しているため、角丸などの表現ができないことや、正方形の辺を利用しているため２辺の角度が90度にしか設定できないことなどが挙げられます。

2つの長方形を回転させ表現する

See the Pen link03 by tetsuro (@tetsuro) on CodePen.

１番細かな設定をすることが可能です。２つ目で挙げた欠点である角丸や角度の調整なども可能です。

欠点としては細かな設定ができる分cssが長くなってしまうことがあります。

Webサイトでリンクの表現は多様されるのでその都度最適な方法を選択して使用してみてください。