【コピペで簡単】CSSで作るおしゃれな矢印の作成方法【パターン別】

下記のような、おしゃれな矢印の作成方法です。

コピペだけで簡単に実装できますので、ご自由にお使い下さい。

①矢印単体

See the Pen 矢印単体 by yusuke-morioka (@yusuke-morioka) on CodePen.

※コードは短く済むのですが、線を太くすると線のフチが斜めになります(画像参照)。

こちらがイヤな方は、以下の別パターンをご使用下さい。

①矢印単体：別パターン

See the Pen 矢印単体2 by yusuke-morioka (@yusuke-morioka) on CodePen.

②矢印単体(下向き)

See the Pen 矢印単体下向き by yusuke-morioka (@yusuke-morioka) on CodePen.

※こちらも太くすると、先のフチが斜めになります。

イヤな方は、以下の別パターンをご使用下さい。

②矢印単体(下向き)：別パターン

See the Pen 矢印単体下向き2 by yusuke-morioka (@yusuke-morioka) on CodePen.

③矢印がボックスの中にあるパターン

半分矢印がボックスの中に収まっている、下記のようなパターンです。

See the Pen 矢印ボタン内部 by yusuke-morioka (@yusuke-morioka) on CodePen.

※こちらも太くすると、先のフチが斜めになります。

イヤな方は、以下の別パターンをご使用下さい。

③矢印がボックスの中にあるパターン：別パターン

See the Pen 矢印ボタン内部2 by yusuke-morioka (@yusuke-morioka) on CodePen.

④矢印がボックスからはみ出てるパターン

半分の矢印がボックスからはみ出ている、よく見る下記のようなパターンです。

See the Pen 矢印ボタン外部 by yusuke-morioka (@yusuke-morioka) on CodePen.

※こちらも太くすると、先のフチが斜めになります。

イヤな方は、下記の別パターンをご使用下さい。

④矢印がボックスからはみ出てるパターン：別パターン

See the Pen 矢印ボタン外部2 by yusuke-morioka (@yusuke-morioka) on CodePen.

⑤くの字矢印のパターン

真ん中の線がない「くの字矢印」を希望の方は、以下を参考にしてみてください。

⑥矢印にアニメーションをつけるなら

マウスホバーで動く矢印アニメーションを作りたいという方は、以下を参考にしてみてください。

⑦矢印ジェネレーターを使用したい方はこちら

もっと柔軟に大きさや細さを調整したい方に向けた、矢印ジェネレーターは以下になります。

まとめ：CSSの矢印は意外と奥が深い

今回紹介した矢印パターンは、border・transform・clip-pathなど、CSSのさまざまなプロパティを組み合わせて作っています。

という方は、CSSの基礎を体系的に学び直すと、一気に応用が効くようになります。

独学で限界を感じている方は、現役エンジニアに質問できるプログラミングスクールで基礎固めするのも一つの手です。

あわせて読みたい

【コピペOK】LPで使える！Q&Aデザイン5パターン【CSS】 LPなどでよく見かける、Q&Aセクションの作り方です。 コピペしてお好みで色を変えるなど、ご自由にお使いください。 もちろんレスポンシブにも対応しています。 パ...

あわせて読みたい

コピペで簡単！CSSで作るステップフロー4パターン【縦あり】 本記事では、登録画面や購入画面などでよく見るステップフロー（プログレスバー）のテンプレートを公開しています。 横並び・縦並びの両パターンを計4種類用意しました...