Experimenting with CSS3 : Here is a working draft on creating a series of water bottles with each bottle indicating the water level.

Demo at Js Fiddle
water bottles css3

HTML

<body>
    <ul>

    <li class="water-bottle">
        <div class="cap">
            <div class="cap-top">
            </div>
            <div class="cap-seal">
            </div>
        </div>
       <div class="bottle">
            <div class="water-empty"> </div>
        </div>
    </li>
          <li class="water-bottle">
        <div class="cap">
            <div class="cap-top">
            </div>
            <div class="cap-seal">
            </div>
        </div>
       <div class="bottle">
            <div class="water-low"> </div>
        </div>
    </li>
    <li class="water-bottle">
        <div class="cap">
            <div class="cap-top">
            </div>
            <div class="cap-seal">
            </div>
        </div>
       <div class="bottle">
            <div class="water-medium"> </div>
        </div>
    </li>

        <li class="water-bottle">
        <div class="cap">
            <div class="cap-top">
            </div>
            <div class="cap-seal">
            </div>
        </div>
       <div class="bottle">
            <div class="water-full"> </div>
        </div>
    </li>
   </ul>

</body>

CSS

body { margin:10% 10%; }
li.water-bottle { float:left;margin-right:15px;}
ul { list-style-type:inline; }
.bottle { background: #ddd; width:100px;border-radius:30px 30px 6px 6px; height:200px; padding:6px;box-shadow: 3px 3px 3px #efefef;margin-bottom:4px;}
.bottle:hover { background: #eee;box-shadow: 2px  2px 2px #efefef;}
.cap { background: #ddd; margin:0 25px;width:60px;border-radius:8px 8px 10px  12px; height:35px;border-top:1px solid #ddd; border-bottom:2px dotted #efefef;}
.cap-top { background:#ededed; height:6px; border-radius:10px 10px 0 0; }
.cap-seal { margin-top:20px;background:#ccc; height:6px; border-radius: 0 0 10px 10px; }
.water-full { background: lightblue ;width:100px;margin-top:10px;height:190px; z-index:1;border-radius:28px 28px 10px 10px;}
.water-medium { background: lightblue; width:100px;height:120px;margin-top:80px; z-index:1;border-radius:28px 28px 10px 10px;}
.water-low { background: lightblue ;width:100px;height:75px; margin-top:125px;z-index:1;border-radius:28px 28px 10px 10px;}
.water-empty { background: lightblue ;width:100px;height:15px; margin-top:185px;z-index:1;border-radius:28px 28px 10px 10px;}

another version