CSS中的Belle图标形状 [英] Belle icon shape in CSS

问题描述

如何仅在CSS中绘制此Belle图标形状?

How can I draw this Belle icon shape in CSS only?

我在正方形元素上尝试过边界半径，但是没有得到确切的角.

I've tried the border-radius on a square element but not getting the exact corners.

推荐答案

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

Well, in order to achieve the exact effect, we cannot rely on a single element even if we use percentage on border-radius.

因此，一个选择可能是使用两个相互重叠的(伪)元素，其中一个元素旋转 90deg :

So one option could be using two (pseudo-)elements overlapping each other where one of them is rotated by 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>

这篇关于CSS中的Belle图标形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！