如何在 CSS 中制作蛋形？ [复制]

Posted 2023-03-06

【中文标题】如何在 CSS 中制作蛋形？ [复制]

【英文标题】：How can I make an egg shape in CSS? [duplicate]

【发布时间】：2019-04-16 13:07:40

【问题描述】：

我正在尝试使用 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>      

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

【问题讨论】：

可能会帮助你改变形状：***.com/questions/18796538/…

坦率地说，如果在单个元素上使用 CSS 可以实现这种形状，我会真的感到惊讶。

也相关：***.com/questions/30711203/…

@Pete OP 的代码看起来与该链接中的***回答者的代码完全一样......可能可以肯定地说他们已经看到了。

我想我已经问过一个类似的问题了。

【参考方案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>

【参考方案2】：

虽然这不能回答你关于 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  
         
        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;

Daniel 的 Codepen：https://codepen.io/danield770/pen/rQyyOo

【讨论】：

提及您可以将 svg 内联为 css 背景可能很有用 - codepen.io/danield770/pen/rQyyOo - 这样就不需要额外的元素

@Danield - 非常好。我将合并该选项并从您的代码笔中复制。只是为了把东西放在一起。

【参考方案3】：

它很容易创建，只需要更改并计算边界半径的百分比。

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

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

试试这个然后继续。