ミギムキ

[CSS] 虫眼鏡アイコンをCSSだけで描きたい

CSSで描いた虫眼鏡アイコン

サンプルコード

html

<span class="magnifying_glass"></span>
スポンサー広告

CSS

.magnifying_glass { display: inline-block; position: relative; width: 1em; height: 1em; color: #000; font-size: 200px; } .magnifying_glass::before { position: absolute; top: 0px; left: 0px; width: 0.7em; height: 0.7em; box-sizing: border-box; border: 0.15em solid currentColor; border-radius: 50%; background-color: #fff; content: ""; } .magnifying_glass::after { position: absolute; top: 0px; left: 50%; z-index: -1; transform: rotate(-45deg); width: 0.15em; height: 1em; box-sizing: border-box; background-color: currentColor; content: ""; }
  • 各要素のサイズは「em」で単位を指定しているため、「.magnifying_glass」の「font-size」を変えるだけでアイコンのサイズを変更することができます
  • 各要素の色も「currentColor」を使用しているので、「.magnifying_glass」の「color」を変えるだけでアイコンの色を変えることができます
  • アイコンを配置する背景色が白以外になる場合は、「.magnifying_glass::before」の「background-color」の色を変更してください

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

ご質問を受け付け中。24時間以内にお返事します

記事の中でわからなかったところ、もっと知りたかったことなど、お気軽にお問い合わせください。原則、24時間以内にお返事させていただきます。

お問い合わせは下記フォームより送信いただくか、ツイッターアカウント@flat8migiにDMをお送りください。

スポンサー広告