css - CSS 中的美女图标形状

Question

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

我已经在方形元素上尝试了 border-radius 但没有得到准确的 Angular 。

Answer 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 */
}

<div></div>