<div class="eggs">
<div class="egg">
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
</div>
<div class="egg">
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
</div>
</div>
.egg {
width: 140px;
height: 200px;
background: #FBE9E7;
margin: 1em auto;
border-radius: 50%/60% 60% 40% 40%;
display: grid;
overflow: hidden;
grid-template-rows: repeat(5, 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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.