CSS - Egg shape
A code example to create an egg shape using HTML and CSS.
The HTML element has a <div> tag with class name "egg" for the egg shape element.
<div class="egg"></div>
This CSS code example draws the egg shape by adjusting the "border-radius" property on a rectangle with different height and width.
.egg {
--w: 300px; /* Base Size */
--color: #f0f8ff; /* Base Color */
--angle: 0deg; /* Rotation */
position: relative;
width: var(--w);
height: var(--w);
transform: rotate(var(--angle));
}
.egg::before {
content: "";
position: absolute;
top: 5%;
left: 15%;
width: 70%;
height: 90%;
border-radius : 80% 80% 80% 80% / 100% 100% 65% 65%;
background-color: var(--color);
}