CSSだけで矢印の作成に挑戦してみた

こんにちは朱夏です。

今回はCSSでどこまでできるのか挑戦してみようと思います。

朱夏

画像を使わずCSSだけで矢印を作る事が出来るらしい。

どうやって作るのか試してみよう。

実行結果

挑戦した結果を先に公開します。

See the Pen
poJpBxy by 朱夏 (@syunatsu1)
on CodePen.

赤い矢印がふよふよ浮いている感じのものです。
次の項から作り方の説明をしていきますが、公開しているコードから解る人は使ってもらって構いません。

矢印の作り方解説

それでは、どうやって作ったかを解説していきます。
手順としては以下のステップになります。

1. 空のdivタグを設置
2. divに枠線を付ける
3. 疑似要素を追加
4. 影を付ける
5. アニメーションを付ける

こんな感じです。
それでは手順の内容を細かく見ていきます。

1.空のdivタグを設置

HTMLで矢印を表示させたい場所に、以下のコードを追記します。

スタイルを付けやすいようにclassを付けます。
ここでは“yajirushi”としました。

2.divに枠線を付ける

CSSでdivにborderで枠線を付けていきます。
この時、上下左右の枠線を個別で指定します。
今回は下向きの矢印を作るので、border-topを使用します。

矢印の仕組みは以下を確認してみてください。

See the Pen
qBdpGmQ by 朱夏 (@syunatsu1)
on CodePen.

4色の線で出来た四角にマウスを合わせると、枠線の幅が太くなります。
限界まで太くなると、枠線は4つの三角形の集合体になります。
今度はそれを左クリックし続けていると、上部の枠線以外が消えます。
これが矢印の矢の部分になるのです。

3.疑似要素を追加

下の実行結果でいうと青い部分を作るステップです。
疑似要素の「::after」を使って、矢印の線の部分を作っていきます。

See the Pen
dyoJEmB by 朱夏 (@syunatsu1)
on CodePen.

ここでは空のコンテンツを用意して、background-colorで矢印の線の部分を表現していきます。
そして、positionとtop、leftで位置を調節して矢印にしています。

具体的に指定したスタイルはこちらです。

形としてはここまでで矢印完成です。
以下は追加で見た目をよくするための効果を付けるステップになります。

4.影を付ける

矢印に影を付けて立体的に見せます。
方法は、divのスタイルに以下の一行を追加するだけです。

疑似要素には追記しなくても影は反映されていました。

5.アニメーションを付ける

矢印がゆっくり上下しているアニメーションを付けて、ふよふよ浮いているようなエフェクトを付けています。

影を付ける時と同じく、divのスタイルに以下の1行を追加。

ここではキーとなるanimation-nameを”hover”、動作時間1秒、回数無限、繰り返しを逆再生と交互に設定しています。
そして、アニメーションの効果を以下の様に指定します。

ここで指定しているアニメーションの動きは以下になります。

開始時：動きなし
終了時：下に10px移動

これで1秒ごとに10px上下するアニメーションを付ける事が出来ました。

あとがき

というわけで今回はCSSで矢印を作ってみました。
CSSで作っているので、スマホとPCで矢印の向きを変えたりなど、色々な使い方が出来そうです。

今回のまとめ

• 矢印の三角部分はborderの一部分
• 線の部分は::afterで作る

わざわざ画像を用意しなくてもその場で矢印などを作れるのはとても便利だと思います。
しかもサイズの調整や色の変更などもその場で出来てしまいます。

使いこなせれば割と便利な機能ですね。

今回はここまでです。
次回もよろしくお願いします。