superellipse()

Limited availability

Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.

Expérimental:Il s'agit d'unetechnologie expérimentale.
Vérifiez attentivement letableau de compatibilité des navigateurs avant de l'utiliser en production.

Lafonction CSSsuperellipse() permet de définir la courbure d'une ellipse, et sert à spécifier lesformes de coins soit directement, soit via les mots-clés<corner-shape-value>.

Syntaxe

css

superellipse(infinity)superellipse(4)superellipse(1.7)superellipse(0)superellipse(-2.8)superellipse(-3)superellipse(-infinity)

Paramètres

<number>: Un nombre compris entre-infinity etinfinity inclus.

La fonctionsuperellipse() retourne une forme de superellipse, utilisée pour définir les valeurs decorner-shape. Une superellipse est une courbe fermée symétrique, intermédiaire entre un rectangle et une ellipse. Elle ressemble à une ellipse qui conserve les caractéristiques géométriques de ses deux axes.

La forme de superellipse est calculée à partir d'une version modifiée de l'ellipse. L'équation suivante définit une ellipse centrée à l'origine :

\frac{x^{2}}{a^{2}} + \frac{y^{2}}{b^{2}} = 1

Les variablesa etb correspondent aux rayons de l'ellipse, tandis que les coordonnéesx ety sont des points sur la circonférence de l'ellipse.

Un cercle est une ellipse dont les rayonsa etb sont de même longueur. Sia etb valent tous deuxr, l'équation du cercle s'écrit :

x^{2} + y^{2} = r^{2}

Dans cette équation,x ety sont les coordonnées des points sur la circonférence du cercle, etr est le rayon du cercle, le centre étant(0, 0). L'ellipse est obtenue en étirant la forme du cercle selon l'axex et/ouy.

Une superellipse est créée en remplaçant l'exposant2 dans chaque cas par 2^K, oùK est l'argument passé à la fonctionsuperellipse(), ce qui modifie la courbure de l'ellipse :

x^{2^{K}} + y^{2^{K}} = 1

Le schéma suivant illustre différentes valeurs desuperellipse() pour le coin supérieur droit d'un conteneur :infinity,1,0,-1 et-infinity :

Schéma illustrant les ellipses créées avec différentes valeurs de K, comme décrit ci-dessous

Une valeur deK égale à0 crée une ligne droite. Cette valeur permet de créer des coins biseautés et correspond au mot-clébevel de<corner-shape-value>.
Une valeur deK égale à1 crée une ellipse ordinaire, correspondant au mot-cléround.
Une valeur deK supérieure à1 rend la forme plus carrée ;2 correspond au mot-clésquircle.
Une valeur deK égale àinfinity crée un carré parfait (correspondant au mot-clésquare), bien que des valeurs deK supérieures ou égales à10 soient pratiquement indiscernables d'un carré.
Des valeurs négatives deK produisent une courbe concave, donnant des coins incurvés vers l'intérieur (« creusés »). Une valeur deK égale à-1 correspond au mot-cléscoop et-infinity au mot-clénotch.

Une superellipse négative ou positive sera symétrique à une superellipse de valeur inverse.

Note :Pour toute valeur du paramètreK passée, la fonctionsuperellipse() retournera toujours la même forme pour cette valeur. Lorsque cette valeur est appliquée à deux éléments, l'apparence du coin peut différer si la taille de la boîte ou la valeur deborder-radius diffère.

Syntaxe formelle

<superellipse()> =
superellipse(<number>|
infinity|
-infinity)

Exemples

Comparaison des valeurs`superellipse()`

Dans cet exemple, deux curseurs<input type="range"> permettent de parcourir différentes valeurssuperellipse() pourcorner-shape et différentes valeurs deborder-radius, afin de comparer leurs effets sur un conteneur. Le code est masqué pour plus de clarté, mais l'explication complète de lacomparaison des valeurs superellipse est disponible sur la page de référencecorner-shape.

<form>  <div>    <label for="superellipse-slider">Choose a superellipse() value:</label>    <input      type="range"           min="-5"      value="0"      max="5"      step="0.1" />  </div>  <div>    <label for="radius-slider">Choose a border-radius value:</label>    <input type="range" min="0" value="45" max="90" />  </div></form><section></section>

html {  font-family: Arial, Helvetica, sans-serif;}body {  width: fit-content;  margin: 20px auto;}section {  display: flex;  justify-content: center;  align-items: center;  flex: 100%;  margin-top: 20px;}form div {  margin-top: 5px;  display: flex;}section {  width: 100%;  height: 180px;  background-color: orange;  background-image: linear-gradient(    to bottom,    rgb(255 255 255 / 0),    rgb(255 255 255 / 0.5)  );}section {  box-shadow: 1px 1px 3px gray;}

const rectangle = document.querySelector("section");const superEllipseRange = document.getElementById("superellipse-slider");const borderRadiusRange = document.getElementById("radius-slider");function setCorners() {  const seValue = `superellipse(${superEllipseRange.value})`;  rectangle.style.cornerShape = seValue;  const brValue = `${borderRadiusRange.value}px`;  rectangle.style.borderRadius = brValue;  rectangle.innerHTML = `<div><code>corner-shape: ${seValue};</code><br><code>border-radius: ${brValue};</code></div>`;}superEllipseRange.addEventListener("input", setCorners);borderRadiusRange.addEventListener("input", setCorners);setCorners();

Note :Voir aussi l'exemple decomparaison des valeurs<corner-shape-value>.