なぜこのように表示されるかについて説明します。まず、width(幅)とheight(高さ)が0になっていることが分かります。試しに幅と高さを0以上にしてみます。ここでは200pxに設定しています。

そうすると四角形が表示されます。一辺の幅は20pxのまま変更していないので20pxのままです。
＊各パラメータついて区別をつけるために色を変更しています。border-leftは読んで字のごとく左線、border-rightは右線、border-bottomは下線を表しています。ここで、縦横幅を0にしてみます。

縦横幅を0にすると異なる4色の三角形の集合体のようなものが表示されます。次に、一番上の色をwhiteもしくはtransparent(透明)にしてみます。

少し勘のいい人は気付いたのではないでしょうか。実は、三角形の正体は縦横幅と縦横線の幅の数値なのです。上向きの三角形を作成したい場合、margin-bottomの色だけ設定し、その他の線の色はwhiteもしくはtranparentにします。つまり、矢印の向きと逆方向の線以外を無色にすれば三角形が作れることになります。これで数値を設定することで自由な三角形が作れるようになります。
次に矢印アイコンの作り方について紹介します。

矢印アイコンの作り方

矢印アイコンは先ほど紹介した方法を応用することで作成できます。三角形の場合に反して、矢印を作る場合は縦幅と横幅の数値は0以上である必要があります。まず始めに下のコードを記述してみてください。

.arrow {
width: 50px;
height: 50px;
border: solid 5px;
}
そうすると黒い線で囲まれた四角形が表示されます。

このままでは矢印にならないので2つ線を消す必要があります。
ここでは上向きの矢印を作ってみます。先ほどのコードにborder-colorと、transformの2つのパラメーターを加えます。

. arrow {
width: 50px;
height: 50px;
border: solid 5px;
border-color: black black transparent transparent;
transform: rotate(-45deg);
}

三角形の場合と同じように縦横線の色を変更し、それ以外の辺の色を白または透明にする原理は同じです。border-colorの色の設定値は左から上、右、下、左を表しており、矢印を向きを設定する際にはrotateを使用します。rotateは時計回りの回転角を表し、回転角を反時計回りに45°回転させることで上向きになることが分かります。

まとめ

今回は矢印アイコンの原理とCSSのみで矢印を作る方法について説明しました。最近ではCSSを使ってサイトに様々なアクセントを追加できるようになりました。画像と比較して容量の面で遥かに軽く、ページ表示時間などの短縮に繋がります。色の設定については以前紹介したように、フリーツールが出回っています。以前紹介したものと今回紹介した方法を応用し、サイトの一つのアクセントとして活用してみてください。

＼この記事をシェアする／

リンクをコピー