title: 3D cylinder loses integrity on small values
body: <p>A while ago I asked <a href="https://stackoverflow.com/questions/26991591/creating-a-dynamic-tank-level-meter-using-html-and-css">this question</a>, but since then I've learnt that this is <em>not</em> a great approach to this issue, so I rewrote my whole design:</p>
  
  <hr>
  
  <p>I currently have a cylinder that I will be using to generate a 3D visualisation of 'how much liquid is in a jar'. It will be gaining its percentage value from a database.</p>
  
  <p>I currently have the following markup:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(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+"%");
      });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="tank"&gt;
      
      &lt;div class="containts"&gt;50%&lt;/div&gt;
  &lt;/div&gt;
  &lt;br/&gt;
  &lt;br/&gt;
  &lt;br/&gt;
  &lt;br/&gt;
  Please enter a valuse between 0 and 100:
  &lt;input type="number" value="50" id="number" /&gt;
  &lt;button id="this"&gt;GO&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>However, when I use values roughly smaller than 10 (i.e. 10%), the tank looses its integrity and the value fails to show correctly (i.e. the liquid appears 'outside' its container).</p>
  
  <p>This is particularly easier to see on smaller screens with smaller values.</p>
  
  <p>Would anyone suggest how to alter my current markup in order to stop the 'bottom dropping off the bottom of the container'?</p>
  
  <p>Any further clarification I would be happy to explain further. </p>
  
  <hr>
  
  <p><a href="http://jsfiddle.net/jbutler483/soj6s8qx/14/" rel="nofollow noreferrer">fiddle for thought</a></p>