CSS hypot() functie

definitie en gebruik

CSS hypot() de functie retourneert de kwadrant van de som van de kwadraten van de parameters.

de retourwaarde wordt berekend met de formule sqrt(x1*x1 + x2*x2 + x3*x3 + ... + xn*xn).

hypot() de functie accepteert getallen met een eenheid, maar alle waarden moeten dezelfde eenheid hebben.

voorbeeld

gebruik hypot() elementbreedte instellen:

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

probeer het zelf

CSS syntaxis

hypot(x1, x2, x3, ...)
waarde beschrijving
x1, x2, x3, ... verplicht. Een of meerdere, met komma's gescheiden waarden.

technische details

versie: CSS4

browserondersteuning

De cijfers in de tabel geven de versie van de eerste browser aan die deze functie volledig ondersteunt.

Chrome Edge Firefox Safari Opera
120 120 118 15.4 106

gerelateerde pagina's

Referentie:CSS acos() functie

Referentie:CSS asin() functie

Referentie:CSS atan2() functie

Referentie:CSS calc() functie

Referentie:CSS cos() functie

Referentie:CSS exp() functie

Referentie:CSS hypot() functie

Referentie:CSS log() functie

Referentie:CSS mod() functie

Referentie:CSS pow() functie

Referentie:CSS sin() functie

Referentie:CSS sqrt() functie

Referentie:CSS tan() functie