css3
Pocket

CSSで簡単な矢印アイコンを作る小ネタです。

完成系はこちら

See the Pen gwryVj by misumi (@mismith0227) 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度回転させることで、矢印を作っています。

簡単な例ですが、仕組みが分かればいろいろと応用きくと思います。

Pocket

カテゴリー: タグ: