Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<meta charset=utf-8 />
<title>Border-radius</title>
</head>
<body>  
  <div class="egg"></div>
  <div class="drop"></div>
  <div class="lemon"></div>
  </body>
</html>
 
BODY {
  background: white;
  }
.egg {
  float: left;
  position: relative;
  width: 50px;
  height: 100px;
  margin: 20px;
  padding: 45px 40px;
  background: tomato;
  border-radius: 80% / 100% 100% 60% 60%; 
  text-align: center;
  }
.drop {
  float: left;
  width: 120px;
  height: 120px;
  margin: 80px 50px 30px;
  background: skyblue;
  border-radius: 0 100% 100% 100%;
  transform: rotateZ(45deg);
}
.lemon {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 50px 0 0;
  float: left;
  background: gold;
  border-radius: 70% 100% / 30% 100%;
  transform: rotateZ(100deg);
  }
.lemon:before,
.lemon:after{
  content: "";
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  left: 7px;
  top: -6px;
  background: yellowgreen;  
  border-radius: 0 100%;
  box-shadow: 0 0 5px rgba(100,100,100,.3);
}
.lemon:before {
  top: 18px;
  left: -2px;
}
.lemon:after {
  transform: rotateZ(-40deg);
}
Output

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

Dismiss x