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

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

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

https://twitter.com/MockRoll/status/1468119456371318785

「CSS 矢印 おしゃれ」の検索ランキング2位になってました。
よく見かけるこんな感じの矢印がコピペで使えますので、必要な方はぜひどうぞ

①矢印単体

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で作るステップフロー4パターン【縦あり】 登録画面や購入画面、などでよく見る「ステップバー」を4種類つくりました。 すべてレスポンシブ対応なので、コピペしてお好みで装飾し、ご自由にお使いください。 パタ...

あわせて読みたい

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