[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でアイコンを描いてみるシリーズ
ご質問など受け付けています
記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。
ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。