ミギムキ

[CSS] 電源アイコンをCSSだけで描きたい

CSSで描いた電源アイコン

サンプルコード

html

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

CSS

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

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

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

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

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

スポンサー広告