Creating a dynamic Tank level/meter using html and css
If you just need to fill the tank, you may use a much simpler stucture to build the tank with two HTML elements, border-radius and a pseudo element.
Then you can use JS to change the height of the green area according to the value entered in the custom data attribute data-amount of the .tk div :
DEMO (change the value of the custom data attribute data-amount in the .tk div to change the height of the liquid).
var amount = $('.tk').attr('data-amount'),
height = amount * 80/100 + 20;
$('.lq').css({height : height + '%'});.tk{ /*Liquid Section*/
position:relative;
width:40%;
height:130px;
padding-top:50px;
margin: 0 auto;
background:rgba(56,56,56,0.8);
border-radius: 100%/40px;
border-bottom:3px solid #000;
text-align:center;
z-index:1;
overflow:hidden;
}
.tk:after, .lq{
content:'';
position:absolute;
top:0; left:0;
width:100%;
height:20%;
z-index:-1;
}
.lq{
background:rgba(128,128,128,0.99);
height:80%;
top:-2px;
border-radius:100%/40px;
border-bottom:3px solid #000;
}
.tk:after{
height:20%;
border:1px solid #000;
border-radius:100%; /*makes circle at top*/
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="tk" data-amount="40">
40%
<div class="lq"></div>
</div>