CSS - たまご型

HTMLとCSSでたまご形の形状を作成するコード例です。

HTML要素には、たまご形の要素となる<div>タグにクラス名 "egg" を設定しています。

<div class="egg"></div>

このCSSコード例では縦横のサイズが違う形状に、「border-radius」プロパティを調節してたまご型を描画しています。

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