[CSS]チェックマーク作ってみた

はじめに

以下のようにFontAwesomeで使えるマークに重なるチェックマークを実装したかったのでやってみました。

やり方

枠線を使って表現していきます。

CSS

.check {
  width: 23px;
  height: 13px;
  border-left: 4px solid #25af01;
  border-bottom: 4px solid #25af01;
  transform: rotate(-45deg);
  position: absolute;
}

widthとheightで長さを調整 border-leftとborder-bottomで太さを調整しています。そしてtransformで角度調整して終わりです。

あとはHTMLに記述するだけです

HTML

<div id="check"></div><i class="fas fa-map-marker-alt respond-button "></i>

もし位置がずれているなどがあればtopやleftなどを駆使して実装していければ良いと思います。

デザインのバリエーションとして使ってみてはいかがでしょうか

参考