用纯CSS绘制超椭圆

正如标题所说：如何用纯CSS绘制超椭圆（特别是Apple iOS7/8）？不太确定这是否可能，但仍然如此

参考图像：

---

这并不确切，但您可以调整想法以获得您可以接受的东西。基本上，您可以将带有椭圆边框的伪元素分层到带有圆形边框的包含元素下方的

：：before

和

：：after

以获得效果

为了可视化，我将伪元素的背景色设置为蓝色和绿色，但它们将被设置为包含元素的颜色

将元素悬停在代码段中以查看组合的部分

div{
宽度：180px；
高度：180像素；
边界半径：20%/20%；
背景颜色：浅蓝色；
位置：相对位置；
}
div:：before，div:：after{
内容：''；
位置：绝对位置；
z指数：-1；
}
div：：之前{
边界半径：2%/30%；
背景颜色：蓝色；
顶部：30px；
底部：30px；
右：-2px；
左：-2px；
}
div：：之后{
边界半径：30%/2%；
背景颜色：绿色；
左：30px；
右：30px；
顶部：-2px；
底部：-2px；
}
部门：悬停，
div:hover：：之前，
div:hover:：after{
背景色：#ff4949
}

---

我们可以使用SVG作为掩码来创建超椭圆。我认为现在最好的解决办法

。超椭圆{
高度：200px；
宽度：200px；
--掩码：url（“数据：image/svg+xml，%3Csvg width='200'height='200'viewBox='0 200'fill='none'xmlns='10http://www.w3.org/2000/svg“%3E%3Cpath d=”M199.178 99.589C199.178 165.982 165.982 199.179 99.5893 199.179C33.1963 199.179 0 165.982 0 99.589C0 33.1964 33.1963 0 99.5893 0C165.982 0 199.178 33.1964 199.178 99.589Z“填充=”黑色“/%3E%3C/svg%3E”）0 0/100%100%无重复；
-webkit掩码：var（--掩码）；
掩码：var（--掩码）；
背景：线性渐变（右下角，橙色，橙色）；
/*将文本居中*/
显示器：flex；
证明内容：中心；
对齐项目：居中；
字号：3em；
}

---

它应该是什么样子？提供一幅图像。@floppet17参考文章：基本上，这是苹果在iOS 7/8中使用的图像。除非使用SVG或HTML画布，否则最好是用圆角绘制一个正方形。其他任何事情都需要大量的工作。@MarcAudet我想这是我现在唯一的选择。我将研究SVG的使用。只是出于好奇，你在哪里找到了这个等式？