3D cylinder loses integrity at low values

Question

Some time ago I asked this question , but since then I found out that this is not a great approach to this problem, so I rewrote my entire project:

---

I currently have a cylinder that I will use to create a three-dimensional visualization of "how much liquid is in the can." It will get the percentage value from the database.

I currently have the following markup:

$(document).ready(function () { var t = (parseInt($('#number').val())); $('.containts').css("height", t + "%"); $('.tank').addClass("makeSmall"); }); $('#this').on("click",function(){ var y = (parseInt($('#number').val())); $('.containts').css("height", y + "%"); $('.containts').text(y+"%"); }); 

 .tank { height:40vw; width:40vw; position:relative; z-index:2; transition:all 1s; } .makeSmall { height:40vw; width:40vw; } .tank:before { height:100%; width:100%; border-radius:100%/30px; background:rgba(0, 0, 0, 0.2); content:""; position:absolute; } .tank:after { content:""; position:absolute; border-radius:100%/30px; height:30px; top:0; left:0; width:100%; background:rgba(0, 0, 0, 0.4); } .containts { position:absolute; background:rgba(255, 0, 0, 0.8); bottom:0; height:1%; width:100%; text-align:center; border-radius:100%/30px; transition:all 1.5s; color:white; } .containts:after { content:""; position:absolute; background:rgba(0, 0, 0, 0.2); top:0; left:0; height:30px; width:100%; border-radius:100%/30px; border-bottom:1px solid black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="tank"> <div class="containts">50%</div> </div> <br/> <br/> <br/> <br/> Please enter a valuse between 0 and 100: <input type="number" value="50" id="number" /> <button id="this">GO</button> 

However, when I use values ​​roughly speaking less than 10 (ie 10%), the tank loses its integrity and the value does not display correctly (ie, the liquid appears “outside” its container).

This is especially noticeable on smaller screens with lower values.

Someone tell me how to change my current layout to stop "bottom to bottom of the bottom of the container"?

I will gladly explain any further clarifications below.

---

violin for thought

Answer 1

The main problem is that you are using multiple units ( px, %, vw ) for the height of your elements, which complicates the calculations. I changed the height of the elipses to 4vw so that they respond to the width of the viewport (e.g. tank height) and simplify the calculations.

Then you need to calculate the height of .contains . The minimum height is 4vw ( = 10% of 40vw ), so it should cover 36vw from 4vw to 40vw . As 36 = 40* 0.9 you can write:

 var t = (parseInt($('#number').val())), h = t*0.9 + 10 ; $('.containts').css("height", h + "%"); 

Demo

 $(document).ready(function() { var t = (parseInt($('#number').val())), h1 = t * 0.9 + 10; $('.containts').css("height", h1 + "%"); $('.tank').addClass("makeSmall"); }); $('#this').on("click", function() { var y = (parseInt($('#number').val())), h2 = y * 0.9 + 10; $('.containts').css("height", h2 + "%"); $('.containts').text(y + "%"); }); 

 .tank { height: 40vw; width: 40vw; position: relative; z-index: 2; transition: all 1s; } .makeSmall { height: 40vw; width: 40vw; } .tank:before { height: 100%; width: 100%; border-radius: 100%/30px; background: rgba(0, 0, 0, 0.2); content: ""; position: absolute; } .tank:after { content: ""; position: absolute; border-radius: 100%/30px; height: 30px; top: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.4); } .containts { position: absolute; background: rgba(255, 0, 0, 0.8); bottom: 0; height: 0; width: 100%; text-align: center; border-radius: 100%/30px; transition: all 1.5s; color: white; } .containts:after { content: ""; position: absolute; background: rgba(0, 0, 0, 0.2); top: 0; left: 0; height: 30px; width: 100%; border-radius: 100%/30px; border-bottom: 1px solid black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="tank"> <div class="containts">0%</div> </div> <br/> <br/> <br/> <br/>Please enter a valuse between 0 and 100: <input type="number" value="0" id="number" /> <button id="this">GO</button>