Fonction hypot() CSS

Définition et utilisation

CSS hypot() La fonction retourne la racine carrée de la somme des carrés des paramètres.

La valeur de retour est calculée par la formule sqrt(x1*x1 + x2*x2 + x3*x3 + ... + xn*xn).

hypot() La fonction accepte des valeurs numériques avec unité, mais toutes les unités doivent être les mêmes.

Exemple

Utiliser hypot() Définir la largeur de l'élément :

div.a {
  width: hypot(80px); /* 80px */
}
div.b {
  width: hypot(40px, 80px); /* 89,44px */
}
div.c {
  width: hypot(40px, 80px, 100px); /* 134,16 */
}
div.d {
  width: hypot(40px, 80px, 100px, 120px); /* 180 */
}
div.e {
  width: hypot(10%, 20%, 40%); /* 45,82% */
}

Essayer personnellement

Syntaxe CSS

hypot(x1, x2, x3, ...)
Valeur Description
x1, x2, x3, ... Obligatoire. Une ou plusieurs valeurs séparées par des virgules.

Détails techniques

Version : CSS4

Prise en charge du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge cette fonction pour la première fois.

Chrome Edge Firefox Safari Opera
120 120 118 15.4 106

Page(s) associée(s)

Référence :Fonction acos() CSS

Référence :Fonction asin() CSS

Référence :Fonction atan2() CSS

Référence :Fonction calc() CSS

Référence :Fonction cos() CSS

Référence :Fonction exp() CSS

Référence :Fonction hypot() CSS

Référence :Fonction log() CSS

Référence :Fonction mod() CSS

Référence :Fonction pow() CSS

Référence :Fonction sin() CSS

Référence :Fonction sqrt() CSS

Référence :Fonction tan() CSS