如何在CSS中制作蛋形？

Question

我正在尝试使用CSS制作鸡蛋风格的图像，但我做得不太正确。我想使鸡蛋顶部更窄一些。

 .egg {
    width: 136px;
    height: 190px;
    background: #ffc000;
    display: block;
    -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    }

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

我希望鸡蛋显示如下图所示，但似乎无法正确调整边框半径！

Answer 1

您可以像下面这样border-radius明智地使用。

请参见下面的代码段：

.egg-shape{
  width: 70px;
  height: 70px;
  border-radius: 80% 15% 55% 50% / 55% 15% 80% 50%;
  border: 3px solid #1c446b;
  transform: rotate(-45deg);
  margin-top: 30px;
  background: #ffc000;
}

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