纯CSS画超椭圆，这也太难了吧……

用纯CSS来画一个超椭圆是非常难的，其实你可以看到网上一些超椭圆都是通过使用伪元素来近似表达形状的。

这些方法有很多问题，比如在某些环境中，曲线的交界处可能看起来不自然，而且很难用于遮蔽图像元素。

在这种方法中，通过使用CSS边框半径属性和变换属性，一个近似的超椭圆被一个单一的div元素所表达，而不使用伪元素。

说明

我设法画了一个形状，看起来像一个有边框半径的对角线超椭圆，我用transform的rotete属性使它看起来很直。 由于它是旋转的，如果你想放置一个图像元素并把它作为一个图标，你可以为里面的元素指定相反的旋转。

超椭圆公式

n:决定超椭圆圆度的值。

与这里近似的超椭圆比较

浅红色叠加的超椭圆是CSS的近似值。

挑战（仅靠CSS解决无法解决的问题）

• a=b(长度和宽度大小相同)
• n就我所尝试的，改变值的形式并没有实现（实际上目标是 n = 2.5 ）

如果你想用比较高级的方法，使用JavaScript或SVG会更快。

我的结果

html：

<div class="App"></div>

CSS：

.App{
  width: 200px;
  height: 200px;
  transform: rotate(-19deg);
  border-radius:
    43% 57% 43% 57% /
    57% 43% 57% 43%;
  background-image: 
    linear-gradient(
      150deg,
      #fff49d 0%,
      #d85882 50%,
      #840e78 100%
    );
}