htmlbook ex37

Батарейка

by Nonamenonamevi4

HTML

<!DOCTYPE html>

<html lang="ru">

  <head>
    <meta charset="utf-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>

  <body>
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="green"></div>
  </body>

</html>

CSS

div {
  width: 120px;
  height: 50px;
  margin: 10px;
  border: 4px solid black;
  position: relative;
}

div:after {
  content: "";
  width: 10px;
  height: 20px;
  background: black;
  position: absolute;
  right: -10px;
  top: 14px;
}

.red {
  background: linear-gradient(to right, #ED1C24 0%, #ED1C24 33%, #fff 33%);
}

.yellow {
  background: linear-gradient(to right, #FFC60B 0%, #FFC60B 66%, #fff 66%);
}

.green {
  background: #00A055;
}