It’s too hard to draw super-ellipses in CSS.

It’s very difficult to draw a hyperellipse in pure CSS, and you can actually see some hyperellipses on the web that use pseudo-elements to approximate shapes.

There are a number of problems with these methods, such as curves that can look unnatural in some environments and can be difficult to use to mask image elements.

In this approach, an approximate hyperellipse is represented by a single div element, using the CSS border radius attribute and transform attribute, without the pseudo-element.

instructions

I managed to draw a shape that looked like a diagonal hyperellipse with a border radius that I usedtransformtheroteteProperty makes it look straight.Since it is rotated, if you want to place an image element and use it as an icon, you can specify the opposite rotation for the element inside.

Hyperelliptic formula

N: Determines the roundness of a hyperellipse.

Compare that to the approximate hyperellipse here

The superellipse superimposed in light red is an approximation of CSS.

Challenges (problems that cannot be solved by CSS alone)

  • A =b
  • N As far as I’m concerned, changing the form of the value doesn’t work (actually the goal is n = 2.5)

If you want a more advanced approach, it’s faster to use JavaScript or SVG.

The results of the I

HTML:

<div class="App"></div>
Copy the code

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%
    );
}
Copy the code