<!doctype html>
<html>
<head>
<style type="text/css">
.greenSquare {
    position: absolute;
    top:50px;
    left:50px;
    width: 100px;
    height: 100px;
    border-bottom-right-radius: 50px 50px;
    border-top-left-radius: 50px 50px;
    background-color: green;
}

.yellowSquare {
    position: absolute;
    top: 20px;
    left: 250px;
    width: 120px;
    height: 120px;
    border-top-right-radius: 60px 60px;
    border-bottom-left-radius: 70px 60px;
    background-color: yellow;
}

.green-shadow {
    position: absolute;
    top: 150px;
    left: 150px;
    width: 120px;
    height: 120px;
    border-bottom-right-radius: 60px 60px;
    border-top-left-radius: 60px 60px;
    background-color: black;
}

.yellow-shadow {
    position: absolute;
    top: 160px;
    left: 350px;
    width: 140px;
    height: 140px;
    border-top-right-radius: 70px 70px;
    border-bottom-left-radius: 80px 70px;
    background-color: black;
}

.container {
    position: absolute;
}
</style>
</head>
<body>
<div class="container">
  <div id="yellowShadow" class="yellow-shadow"></div>
  <div id="yellow" class="yellowSquare"></div>
  <div id="greenShadow" class="green-shadow"></div>
  <div id="green" class="greenSquare"></div>
</div>
</body>
</html>