如何在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>

Answer 2

这是我的尝试，与您的尝试没什么不同

.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% / 70% 70% 30% 30%;}

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

不过，公平地说，您不会走得更近。您只能将div的角定为椭圆形，因此您永远不会真正在图像中获得该蛋形。

但是，也许您可​​以使用::after伪元素和/或巧妙定位的box-shadow尝试一些技巧，但这完全取决于您要如何处理鸡蛋。如果您需要，甚至可以制作一个内联SVG。或者，作为最后的选择，您可以只创建一个图像并将其用作背景（但这仅在您真的很绝望，或者不关心缩放或加载图像时才适用）。

Answer 3

尽管就CSS而言，这不能回答您的问题，但我认为我为您提供了更好的解决方案。

当您想要特定形状时，可以使用SVG矢量图形来达到最佳效果。

查看示例和添加到路径的类。唯一的问题是必须创建SVG图像，以便优化形状或找到形状。或使用此处提供的一个。

您可以更改CSS并更改颜色和大小。

.svg_egg {
  width: 120px;
}

path.eggcolor {
  fill: pink;
  stroke: #000000;
  stroke-width: 2;
  stroke-miterlimit: 10;
}

<svg class='svg_egg'  version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 132.2 189" style="enable-background:new 0 0 132.2 189;" xml:space="preserve">
<path class='eggcolor' class="st0" d="M131.2,101.7c4.1,56.2-28.6,86.3-64.6,86.3S-3.7,157.2,1,101.7C6,43,45,1,66.1,1C86,1,127,44,131.2,101.7z"/>
</svg>

修改 如@Danield所述，可以将SVG图像合并到CSS中，从而使SVG图像的放置就像添加类名一样简单。

<div class="svg_egg"></div>

.svg_egg {
    width: 120px;
    height: 170px;
    background: url('data:image/svg+xml;charset=UTF-8,<svg width="100%" 
        height="100%" 
        viewBox="0 0 132.2 189" xmlns="http://www.w3.org/2000/svg">
        <path fill="pink" stroke="black" d="M131.2,101.7c4.1,56.2-28.6,86.3-64.6,86.3S-3.7,157.2,1,101.7C6,43,45,1,66.1,1C86,1,127,44,131.2,101.7z"/></svg>') no-repeat;
}

丹尼尔（Danired）的Codepen：https://codepen.io/danield770/pen/rQyyOo

Answer 4

创建起来很容易，只需要更改和计算边界半径的百分比即可。

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

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

尝试一下，然后继续。