How to create an egg shape in CSS?

Question

I want to create this custom white color shape without the cart icon in css. How can i do that ?

Answer 1

Use border radius

Like this

border-radius:70% 30% 30% 70% / 60% 40% 60% 40%;

like image

enter image description here

Demo

.cart-div{
  background:#2c44a3;
  width:200px;
  height:200px;
  padding:50px;
}
.shape{
  background:#fff;
  width:180px;
  height:180px;
  color:#111;
  border-radius:58% 42% 63% 37% / 35% 31% 69% 65%;
  display:flex;
  align-items:center;
  justify-content:center;
}

<div class="cart-div">
  <div class="shape">
  cart icon
  </div>
</div>

Can you make different shapes ? visit here