enter image description here

Непосредственно ссылка на код.

https://codepen.io/FuZzZo/pen/rrWaqR

    3 answers 3

     .battery { display: inline-block; width: 40px; height: 140px; margin-bottom: 5px; border: 5px solid black; border-radius: 10px; position: relative; } .battery::after { margin-left: 10px; margin-top: 4px; position: absolute; content: ''; width: 20px; height: 7px; background: #000; top: -15px; border-radius: 3px; } } .red, .yellow, .green { position: absolute; top: 0; bottom: 0; } .yellow, .green, .red, .orange { position: absolute; width: 100%; color: black; bottom: 0px; } .yellow div, .red div, .green div, .orange div { padding: 4.5px; margin: 1.5px; border: 1px solid blue; } .yellow div { background-color: yellow; } .red div { background-color: red; } .green div { background-color: green; } .orange div { background-color: orange; } 
     <div class="battery"> <div class="white"></div> </div> <div class="battery"> <div class="red"> <div></div> <div></div> <div></div> </div> </div> <div class="battery"> <div class="orange"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="battery"> <div class="yellow"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="battery"> <div class="green"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div>

    My version is not too beautiful, but also has the right to life

      Alternatively, you can use the flex property

      CSS

       .battery { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; width: 40px; height: 100px; margin-bottom: 5px; border: 5px solid black; border-radius: 10px; position: relative; float: left; } .battery::after { margin-left: 10px; margin-top: 4px; position: absolute; content: ''; width: 20px; height: 7px; background: #000; top: -15px; border-radius: 3px; } .part { width: 36px; height: 20px; border: 1px solid black; } .red { background-color: red; margin-bottom: 2px; } .yellow { background-color: yellow; margin-bottom: 2px; } .green { background-color: green; margin-bottom: 2px; } .orange { background-color: orange; margin-bottom: 2px; } 
       <div class="battery"> </div> <div class="battery"> <div class="part red"></div> </div> <div class="battery"> <div class="part orange"></div> <div class="part orange"></div> </div> <div class="battery"> <div class="part yellow"></div> <div class="part yellow"></div> <div class="part yellow"></div> </div> <div class="battery"> <div class="part green"></div> <div class="part green"></div> <div class="part green"></div> <div class="part green"></div> </div>

      • MB I made a mistake somewhere, but the tops of the batteries crawled away =) - alexoander
      • Maybe now everything is fine. Rules code in terms of the contents of the battery) - Dmitry Kulevich

      You can use a linear-gradient chip using your .red class as an example , replace its background-color attribute with

        background-image: repeating-linear-gradient( white, white10px, red 10px, red 20px /* determines size */ );

      this avoids the many <div> in your markup