三角形の矢印アイコンをつくろう

cssで三角形の矢印を作る場合、三角を直接作るのではなく、borderをうまく使って三角形を作っていきます。

図にあるように、以下のような手順を行うことで簡単に作成することができます。

1. borderを指定する
2. 幅・高さを0にする
3. 一片以外のborderの色を透明にする

まず最初に三角形の元となるborderを指定していきます。今回はわかりやすいように各辺の色を変えていますが、通常は1色で大丈夫です。

色を変えているので分かると思いますが、各辺の境目は斜めにできていています。三角形アイコンはこれを利用して作成していきます。

次に、真ん中の部分は不要なので幅・高さを0にしてborderだけの要素にしていきます。

幅と高さを指定しないと要素に応じて自動で幅が決まってしまうため、ここは明示的に幅と高さを指定する必要があります。

最後に残したい一片以外のborderの色を透明にすることで三角形が完成します。

この状態でも大丈夫なのですが、透明部分のスペースも要素として表示されているので、表示よりも大きいサイズとしてレンダリングされます。

要素のサイズを厳密にしたい場合は色をつけている辺と反対側のborderの太さを0にするとより厳密なアイコンとして作成できます。