<meter> tag example

Using html5 <meter> tag to simulate liquid gauge

HTML

<meter id="fuel" name="fuel-so-so"
       min="0" max="100"
       low="33" high="66" optimum="80"
       value="50">
    at 50/100
</meter>

<meter id="fuel" name="fuel-ok"
       min="0" max="100"
       low="33" high="66" optimum="80"
       value="80">
    at 50/100
</meter>

<meter id="fuel" name="fuel-low"
       min="0" max="100"
       low="33" high="66" optimum="80"
       value="22">
    at 50/100
</meter>

<meter id="fuel-fat" name="fuel"
       min="0" max="100"
       low="33" high="66" optimum="80"
       value="22">
    at 50/100
</meter>

CSS

meter {
  margin-top:3em;
transform: rotate(270deg); /* Equal to rotateZ(45deg) */
}

#fuel-fat {
  display:block;
height:5rem;
width:2rem;
margin:3em;
}