【CSS】CSSで超簡単な矢印アイコンを作る
CSSで簡単な矢印アイコンを作る小ネタです。
完成系はこちら
See the Pen gwryVj on CodePen.
CSSのコードはこちら
li a::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border: solid #333; border-width: 2px 2px 0 0; transform: rotate(45deg); }
セレクタは自由にしてください。
指定したい要素に対して、borderを利用しています。
上記の例では、擬似的に四角を作って、上と右にボーダーを指定しています。それをtransformで45度回転させることで、矢印を作っています。
簡単な例ですが、仕組みが分かればいろいろと応用きくと思います。