使用纯CSS绘制超椭圆

tyt*_*a03 3 css

正如标题所说:你如何用纯CSS绘制一个超椭圆(特别是Apple iOS7/8)?不太确定是否可能,但仍然如此.

参考图片: 在此输入图像描述

Tal*_*mid 6

这不是确切的,但您可以调整想法以获得可接受的内容.基本上,您使用带有圆形边框的包含元素下的带有椭圆边框的图层::before::after伪元素来获得效果.

我将伪元素的背景颜色设置为蓝色和绿色以进行可视化,但它们将设置为包含元素的颜色.

JSFiddle演示

用于技术可视化的红色和蓝色伪元素