[CSS] サイズや色、向きの調整が簡単な矢印アイコンをCSSで描きたい

公開日:2019/01/08 更新日:2020/09/20

やりたいこと

矢印はコンテンツの装飾によく使われる王道的なアイコンです
用途によってサイズや色、向きがまちまちな矢印を画像で作るのは大変です。ならCSSで書けばいいじゃないということで、巷では色々な矢印の描き方が紹介されています
しかし、before要素とafter要素で矢印のサイズや色を指定するやり方では調整に手間がかかってしまいます
そこで、サイズや色、角度の変更が楽にできるような矢印アイコンのCSSを検討してみました

サンプルコード

html

<div class="arrow"></div>

CSS

.arrow {
    display: inline-block;
    position: relative;
    width: 3em;
    height: 3em;
    color: #3388dd;
    font-size: 30px;
}
.arrow::before,
.arrow::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    content: "";
}
.arrow::before {
    right: -1em;
    width: 0px;
    height: 0px;
    border: 1em solid transparent;
    border-left: 1.5em solid currentColor;
}
.arrow::after {
    left: 0px;
    width: 2em;
    height: 1em;
    background-color: currentColor;
}

矢印のサイズや色、向きの変え方

arrowクラスの「font-size: 30px;」を変えるだけで矢印のサイズを変えることができます
arrowクラスの「color: #3388dd;」を変えるだけで矢印の色を変えることができます
矢印の角度は、arrowクラスの「transform: rotate(0deg);」を変えることで変更できます
以下のように、縦、横、斜めなど必要な方向分のスタイルをクラス化しておくと、より使いやすくなると思います

縦×横×斜め9方向分のクラス

.arrow.d_u {
    transform: rotate(270deg);
}
.arrow.d_ur {
    transform: rotate(315deg);
}
.arrow.d_r {
    transform: rotate(0deg);
}
.arrow.d_dr {
    transform: rotate(45deg);
}
.arrow.d_d {
    transform: rotate(90deg);
}
.arrow.d_dl {
    transform: rotate(135deg);
}
.arrow.d_l {
    transform: rotate(180deg);
}
.arrow.d_ul {
    transform: rotate(215deg);
}

仕組み、解説、補足など

before、after要素のサイズ指定にemを使用しているため、親要素のfont-sizeに連動して三角と線のサイズが変わります
before、after要素の背景、borderの色指定に「currentColor」を使用しているため、親要素のcolorに連動して三角と線の色が変わります

CSSでアイコンを描いてみるシリーズ

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。