用纯CSS绘制超椭圆形

问题描述：

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

参考图像： enter image description here

应该怎么看？提供一张图片。 – 2014-09-24 10:04:44

@ Flopet17参考文章：http://www.pixelresort.com/blog/start-making-ios-7-icons-with-the-app-icon-template-3-0/ 基本上，它是一个Apple在iOS 7/8中使用。 – tyteen4a03 2014-09-24 10:26:24

除非使用SVG或HTML canvas，否则最好的做法是绘制一个带圆角的正方形。其他任何事情都会花费很多工作。 – 2014-09-24 10:41:26

答

这是不准确的，但你或许可以调整的想法得到的东西接受你。基本上，您可以在具有圆形边框的包含元素下面使用椭圆边框将具有椭圆边框的::before和::after伪元素分层以获得效果。

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

JSFiddle demo

Red and blue pseudo-elements for visualization of technique

用纯CSS绘制超椭圆形

相关推荐