<div class="eggs">
<div class="egg egg-left">
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
</div>
<div class="egg egg-right">
</div>
</div>
.eggs {
margin: 1em auto;
text-align: center;
}
.egg {
width: 140px;
height: 200px;
margin: 1em auto;
background: #FBE9E7;
border-radius: 50%/60% 60% 40% 40%;
overflow: hidden;
display: inline-block;
}
.stripe {
height: 20%;
}
.stripe:not(:first-child) {
border-top: 2px solid #fff;
}
.stripe:nth-child(1) {
background-color: #FFBDE8;
}
.stripe:nth-child(2) {
background-color: #BDE8FF;
}
.stripe:nth-child(3) {
background-color: #E8FFBD;
}
.stripe:nth-child(4) {
background-color: #FFE8BD;
}
.stripe:nth-child(5) {
background-color: #E8BDFF;
}
.egg-right {
background-color: #EC407A;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.