CSS hypot() Funktion

Definition und Verwendung

CSS hypot() Die Funktion gibt die Quadratwurzel der Summe der Quadrate ihrer Parameter zurück.

Der Rückgabewert wird durch die Formel sqrt(x1*x1 + x2*x2 + x3*x3 + ... + xn*xn) berechnet.

hypot() Die Funktion akzeptiert numerische Werte mit Einheiten, aber alle Werte müssen die gleiche Einheit haben.

Beispiel

Verwenden hypot() Elementbreite einstellen:

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% */
}

Selbst ausprobieren

CSS Syntax

hypot(x1, x2, x3, ...)
Wert Beschreibung
x1, x2, x3, ... Erforderlich. Ein oder mehrere durch Kommas getrennte Werte.

Technische Details

Version: CSS4

Browser-Unterstützung

Die Zahlen in der Tabelle geben die Versionsnummer des ersten Browsers an, der diese Funktion vollständig unterstützt.

Chrome Edge Firefox Safari Opera
120 120 118 15,4 106

Verwandte Seiten

Referenz:CSS acos() Funktion

Referenz:CSS asin() Funktion

Referenz:CSS atan2() Funktion

Referenz:CSS calc() Funktion

Referenz:CSS cos() Funktion

Referenz:CSS exp() Funktion

Referenz:CSS hypot() Funktion

Referenz:CSS log() Funktion

Referenz:CSS mod() Funktion

Referenz:CSS pow() Funktion

Referenz:CSS sin() Funktion

Referenz:CSS sqrt() Funktion

Referenz:CSS tan() Funktion