如何在CSS中创建鸡蛋形状？

Question

我想创建这个自定义的白色形状，而不使用 css 中的购物车图标。我怎样才能做到这一点？

Answer 1

使用边框半径

像这样

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

像图片一样

演示

.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>

你能做出不同的形状吗？访问这里