【コピペで簡単】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種類つくりました。 全てレスポンシブ対応ですので、コピペしてお好みで装飾して使ってください。 【パターン1...
あわせて読みたい
【コピペOK】LPで使える!Q&Aデザイン4パターン【CSS】 LPなどでよく見かける、Q&Aセクションの作り方です。 コピペしてお好みで色を変えるなど、ご自由にご利用ください。 もちろんレスポンシブにも対応しています。 【...
目次