Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <br><br>
<div id="beerglass">
    <div class="beertop"></div>
    <div class="beerbody"></div>
    <div class="beerbottom"></div>
    <!--<div class="beercircle-l"></div>-->
    <!--<div class="beercircle-r"></div>-->
</div>
</body>
</html>
 
body html {
  width: 100%;
  height:100%;
}
#beerglass {
    position:relative;
    padding-top:100%;
    width:50%;
    overflow:hidden;
}
.beertop {
    position:absolute;
    width:100%;
    height:4%;
    border-radius: 100%;
    background:blue;
    top:0;
    z-index:2;
}
.beerbody {
    height:97%;
    width:100%;
    background:green;
    position:absolute;
    -webkit-border-top-right-radius: 1%;
    -webkit-border-bottom-right-radius: 6%;
    -moz-border-radius-topright: 1%;
    -moz-border-radius-bottomright: 6%;
    border-top-right-radius: -1%;
    border-radius: -100%;
    margin:3% 0%;
    top:0;
    z-index:1;
}
.beerbottom {
    position:absolute;
    width:85%;
    height:4%;
    border-radius: 100%;
    background:blue;
    margin:0% 7.5%;
    bottom:0;
    z-index:2;
}
.beercircle-l {
    position:absolute;
    height: 100%;
    width: 30%;
    -webkit-border-top-right-radius: 100%;
    -webkit-border-bottom-right-radius: 60%;
    -moz-border-radius-topright: 100%;
    -moz-border-radius-bottomright: 60%;
    border-top-right-radius: 100%;
    border-bottom-right-radius: 60%;
    background:green;
    margin: 0% -10%;
    top:0;
    z-index:3;
}
.beercircle-r {
    position:absolute;
    height: 100%;
    width: 30%;
    -webkit-border-top-left-radius: 100%;
    -webkit-border-bottom-left-radius: 60%;
    -moz-border-radius-topleft: 100%;
    -moz-border-radius-bottomleft: 60%;
    border-top-left-radius: 100%;
    border-bottom-left-radius: 60%;
    background:green;
    margin: 0% 80%;
    top:0;
    z-index:3;
}
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers