Función hypot() de CSS

Definición y uso

CSS hypot() La función devuelve la raíz cuadrada de la suma de los cuadrados de sus argumentos.

El valor devuelto se calcula mediante la fórmula sqrt(x1*x1 + x2*x2 + x3*x3 + ... + xn*xn).

hypot() La función acepta valores numéricos con unidades, pero todas las unidades de los valores deben ser las mismas.

Ejemplo

Usar hypot() Establecer el ancho del elemento:

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

Prueba personalmente

Sintaxis de CSS

hypot(x1, x2, x3, ...)
Valor Descripción
x1, x2, x3, ... Obligatorio. Unos o varios valores separados por comas.

Detalles técnicos

Versión: CSS4

Compatibilidad del navegador

Los números en la tabla representan la versión del navegador que admite completamente la función por primera vez.

Chrome Edge Firefox Safari Opera
120 120 118 15.4 106

Páginas relacionadas

Referencia:Función acos() de CSS

Referencia:Función asin() de CSS

Referencia:Función atan2() de CSS

Referencia:Función calc() de CSS

Referencia:Función cos() de CSS

Referencia:Función exp() de CSS

Referencia:Función hypot() de CSS

Referencia:Función log() de CSS

Referencia:Función mod() de CSS

Referencia:Función pow() de CSS

Referencia:Función sin() de CSS

Referencia:Función sqrt() de CSS

Referencia:Función tan() de CSS