CSS实现不同状态的电池电量图

效果图

代码

<!-- 红色：battery-danger,黄色：battery-warning -->
<div class="battery" title="80%">
    <i class="iconfont iconfont-dianliang"></i>
    <div class="battery-progress">
      <div class="battery-progress__value" style="width: 80%"></div>
    </div>
</div>

.battery {
    position: relative;

    i {
      color: #67c23a;
      font-size: 32px;
    }

    &-progress {
      position: absolute;
      left: 5px;
      right: 9px;
      top: 14px;
      bottom: 14px;
      overflow: hidden;

      &__value {
        background: #67c23a;
        height: 100%;
      }
    }

    &-danger {
      i {
        color: #f56c6c;
      }

      .battery-progress {
        &__value {
          background: #f56c6c;
        }
      }
    }

    &-warning {
      i {
        color: #e6a23c;
      }

      .battery-progress {
        &__value {
          background: #e6a23c;
        }
      }
    }
}

其中，iconfont iconfont-dianliang 为阿里图标库iconfont的字体图标。可自行前往官网下载字体图标文件：