How to Make Egg Shape Using CSS

October 5, 2021

How to create Egg Shape using CSS

HTML Code

<html>
<head>
  <title>Shape</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/style.css"/>

</head>
<body>

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


</body>
</html>

CSS Code

body{
	margin:0;
}

*{
	box-sizing: border-box;
}


 .container{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}

.egg{
	width: 250px;
	height: 380px;
	background-color: blue;
	border-radius: 50% 50% 50% 50%/ 60% 60% 30% 30%;
}