cssのみで 「バッテリー」 アイコンを作成してみました。最近なかなか更新出来ていなかったので、久しぶりに作ったら結構忘れてました・・・
ソース
html
<div class="battery_full"></div>
css
/* 枠 */ .battery_full { font-size: 100px; position: relative; margin-top: 0.3em; width: 1.6em; height: 1.2em; background: linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 0em 0em / 1.3em 0.1em no-repeat, linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 1.3em 0em / 0.1em 0.2em no-repeat, linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 1.3em 0.2em / 0.3em 0.1em no-repeat, linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 1.5em 0.2em / 0.1em 0.5em no-repeat, linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 1.3em 0.7em / 0.3em 0.1em no-repeat, linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 1.3em 0.8em / 0.1em 0.2em no-repeat, linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 0em 0.9em / 1.3em 0.1em no-repeat, linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 0em 0em / 0.1em 0.9em no-repeat ; } /* 残り */ .battery_full::before { content: ""; position: absolute; top: 0.2em; left: 0.2em; width: 1em; height: 0.6em; background-color: #39a9d6; }