I need a shape of glass in CSS

Question

This may be very strange question. but this is what i need. I have somehow created a range slider which fills a shape with color upon sliding from value 0 to 100. Here is the current state (please slide the Question#1)

The shape I created was an egg shape.(lol). I need to make it looks like a Glass. So while changing the slider range, it should seem a glass is filling with something.

Any idea on how to make a glass shape in CSS?

This is how I made the egg shape:

.right {
  width: 126px;
  height: 180px;
  position: absolute;
  left: 200px;
  left: auto;
  border-style: solid;
  border-width: 1px;
  -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

<div class="right"></div>

Answer 1

Depends on the specific type of glass you need, but essentially it all boils (ha!) down to the same idea — use pseudo elements for extra visuals. Let's make this basic shape:

It can even be animated with CSS3 animation:

In this example:

• the glass is made from the divs border and the div is made position: relative.

• the stem is made from :before and positioned with position: absolute and left / top

• the base is made from :after and positioned with position: absolute and left / top

Basic Example

div {
  height: 50px;
  width: 50px;
  border: solid 1px #000;
  border-radius: 0 0 50% 50%;
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin: 20px;
}
div:before {
  height: 100%;
  width: 1px;
  background: #000;
  content: '';
  display: block;
  left: 50%;
  top: 100%;
  position: absolute;
}
div:after {
  height: 100%;
  width: 40px;
  height: 1px;
  background: #000;
  content: '';
  display: block;
  left: 50%;
  margin-left: -20px;
  top: 100px;
  position: absolute;
}
.two {
  border-width: 6px;
  border-radius: 5px 5px 50% 50%;

}
.two:before {
  width: 6px;
  margin-left: -3px;
}
.two:after {
  height: 6px;
  border-radius: 6px;
}
span {
  position: absolute;
  bottom: -6px;
  left: -6px;
  background: #F00;
  width: 100%;
  border: solid 6px #000;
  border-top: none;
  -webkit-animation: fillGlass 3s infinite;
  animation: fillGlass 3s infinite;
  border-radius: 0 0 50px 50px;
}
@-webkit-keyframes fillGlass {
  0% {
    height: 25px;
  }
  50% {
    height: 46px;
    }
  100% {
    height: 25px;
  }
}
@keyframes fillGlass {
  0% {
    height: 25px;
  }
  50% {
    height: 46px;
    }
  100% {
    height: 25px;
  }
}

<div></div>
<div class="two">
  <span></span>
</div>