<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.