<div class="shape shape1"></div>
<div class="shape shape2"></div>
<div class="shape shape3"></div>
<div class="shape shape4"></div>
<div class="shape lemon"></div>
.shape {
margin: 1em;
height: 200px;
width: 100px;
display: inline-block;
}
.shape1 {
border: 3px solid #AEEA00;
border-radius: 60px/45px;
}
.shape2 {
border: 3px solid #FF80AB;
border-radius: 10px/45px;
}
.shape3 {
border: 3px solid #29B6F6;
border-radius: 40% 0%;
}
.shape4 {
border: 3px solid #AB47BC;
border-radius: 70%/0% 40% 40%;
}
.lemon {
width: 170px;
background-color: #FFEB3B;
border-radius: 115px 20px 125px 15px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.