ミギムキ

[CSS] サイズや色、向きの調整が簡単な矢印アイコンを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; }

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

縦×横×斜め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); }

仕組み、解説、補足など

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

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

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

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