ミギムキ

[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); }
スポンサー広告

仕組み、解説、補足など