如何仅在 CSS 中绘制此 Belle 图标形状？
我已经尝试过方形元素上的边框半径，但没有得到确切的角。
那么，为了达到准确的效果，即使我们使用百分比，我们也不能依赖单个元素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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
