ミギムキ

[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でアイコンを描いてみるシリーズ

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。

スポンサー広告