Material Box

Material Box

WEB Design & Material Images

CSS - Egg shape

CSS

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

CSS - Egg shape

TitleCSS - Egg shape

CategoryCSS

Created

Update

AuthorYousuke.U