Create Effect 'Egg' (Telur) Using CSS

Baiklah pada kesempatan kali ini utta akan memberikan trik bagaimana cara membuat 'Effect 'Egg' (Telur) Menggunakan CSS', seperti contoh gambar diatas. dan disini sya membuat 2 'EGG' mode Vertikal dan Horizontal.

HTML::

<div id="vertiaka-egg"></div>

<div id="horizaka-egg"></div>

CSS::

#vertiaka-egg {
 width: 125px;
 height: 200px;
 margin: 20px auto 30px;
background:#D5D3D3;
 -webkit-border-radius: 50%/60% 60% 40% 40%;
 -moz-border-radius: 50%/60% 60% 40% 40%;
 border-radius: 50%/60% 60% 40% 40%;

 -webkit-box-shadow: 0px 0px 20px #D5D3D3, 0px 0px 20px #D5D3D3;
 -moz-box-shadow: 0px 0px 20px #D5D3D3, 0px 0px 20px #D5D3D3;
 box-shadow: 0px 0px 20px #D5D3D3, 0px 0px 20px #D5D3D3;
}

#horizaka-egg {
 width: 200px;
 height: 125px;
 margin: 20px auto 30px;
background:#4b8df9;
 -webkit-border-radius: 40% 60% 60% 40%/50%;
 -moz-border-radius: 40% 60% 60% 40%/50%;
 border-radius: 40% 60% 60% 40%/50%;

 -webkit-box-shadow: 0px 0px 20px #4b8df9, 0px 0px 20px #4b8df9;
 -moz-box-shadow: 0px 0px 20px #4b8df9, 0px 0px 20px #4b8df9;
 box-shadow: 0px 0px 20px #4b8df9, 0px 0px 20px #4b8df9;
}

Dan Hasilnya

Selamat Mencoba!