CSS中的美女图标形状答案

【问题标题】：Belle icon shape in CSSCSS中的美女图标形状
【发布时间】：2015-04-14 18:34:20
【问题描述】：

如何仅在 CSS 中绘制这个 Belle 图标形状？

我在方形元素上尝试了边框半径，但没有得到确切的角。

【问题讨论】：

查看这个链接，可以创建http://www.cssmatic.com/border-radius
“我已经在方形元素上尝试了边框半径，但没有得到确切的角。”我们可以看看吗？
@web-tiki border-radius: 40% 和类似的值。这是我尝试过的

标签： css icons css-shapes

【解决方案1】：

好吧，为了达到确切的效果，即使我们在border-radius上使用百分比，也不能依赖单个元素。

因此，一种选择是使用两个（伪）元素相互重叠，其中一个元素旋转90deg：

div {
  width: 300px;
  height: 300px;
  
  /* Just for demo */
  width: 95vmin; height: 95vmin;
  
  position: relative;
}

div:after, div:before {
  content: "";
  background: teal;
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  bottom: 0;
  border-radius: 50% / 22%;
}

div:before {
  transform: rotate(-90deg); /* vendor prefixes omitted due to brevity */
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

这是一个更好的例子

【解决方案2】：

如果您想要精确的形状，最好使用 SVG。例如：

<svg version="1.1" height="200" width="200" viewBox="0 0 30 30">
  <path d="M15 0 Q0 0 0 15 T15 30 30 15 15 0" fill="#249B57" stroke="none" />
</svg>

这使用带有二次贝塞尔曲线 (Q) 的路径

【讨论】：

【解决方案3】：

使用百分比 (%) 单位的边框半径，而不是 px 单位：

div{
  height:300px;
  width:300px;
  background:tomato;
  border-radius: 45%;
  }

&lt;div&gt;&lt;/div&gt;

注意

可以肯定地说，但是，我只是尝试复制问题中描述的图像，因此可能不符合您提到的“美女”的形状（我曾经认为是一个迪士尼角色，在 css 中很难复制）。

【讨论】：

【解决方案4】：

试试这个小提琴， Demo

.belly{
    background: #2AA55F;
    width: 200px;
    height: 200px;
    border-radius: 82px / 83px;
}

【讨论】：