[Codes / Scripts] Pure CSS Wine Glass

[cReTzUUUU]

 

HTML:

 

<div class="box">
  <div class="glass">
    <div class="wine">
    </div>
  </div>
  <div class="rod">
  </div>
  <div class="base">
  </div>
</div>

 

CSS:

body{
  background:#8e44ad;
  
}

.box{
  height:450px;
  width:350px;
  margin:auto;
  position:relative;
  border:3px solid white;
  box-sizing:border-box;
  padding-top:30px;
  
}

.glass{
  height:200px;
  width:200px;
  background:white;
  margin:30px auto;
  -webkit-clip-path: polygon(0 1%, 100% 0, 95% 100%, 6% 100%);
clip-path: polygon(0 1%, 100% 0, 95% 100%, 6% 100%);
  border-radius: 50% 50% 0 0;
  transform: rotate(180deg);  
  overflow:hidden;
}

.wine{
  background-color:rgba(255,0,0, 0.7);
  height:100px;
  border-radius: 50% 50% 0 0;
}

.rod{
  height:130px;
  width:15px;
  background:white;
  margin:-32px auto;
  border-radius:0 0 5px 5px;
}

.base{
  width:100px;
  height:30px;
  background-color:white;
  margin:10px auto;
  border-radius:50%;
  
}