CSS Battery Icons

CSS Battery Icons

HTML
<div class="battery-icon"></div>
CSS
.battery-icon {
  position: absolute;
  width: 200px;
  height: 60px;
  border-radius: 10px;
  border: 5px solid #FFF;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.battery-icon:before {
    content: '';
    position: absolute;
    right: -15px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 30px;
    border-radius: 5px;
    background: #fffefe;
}

.battery-icon:after {
  content: '';
  position: absolute;
  left: 4px;
  top: 4px;
  width: 30%;
  height: 52px;
  background-color: #c8f86b;
  border-radius: 5px;
}

DEMO

View Demo
1,462 Views
63950cookie-checkCSS Battery Icons

Leave a Reply

Your email address will not be published. Required fields are marked *