Função hypot() do CSS

Definição e uso

CSS hypot() A função retorna a raiz quadrada da soma dos quadrados dos parâmetros.

O valor retornado é calculado pela fórmula sqrt(x1*x1 + x2*x2 + x3*x3 + ... + xn*xn).

hypot() A função aceita valores com unidades, mas todas as unidades dos valores devem ser iguais.

Exemplo

Usar hypot() Definir a largura do 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% */
}

Experimente você mesmo

Sintaxe do CSS

hypot(x1, x2, x3, ...)
Valor Descrição
x1, x2, x3, ... Obrigatório. Uma ou mais valores separados por vírgulas.

Detalhes técnicos

Versão: CSS4

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta completamente a função pela primeira vez.

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

Páginas relacionadas

Referência:Função acos() do CSS

Referência:Função asin() do CSS

Referência:Função atan2() do CSS

Referência:Função calc() do CSS

Referência:Função cos() do CSS

Referência:Função exp() do CSS

Referência:Função hypot() do CSS

Referência:Função log() do CSS

Referência:Função mod() do CSS

Referência:Função pow() do CSS

Referência:A função sin() do CSS

Referência:A função sqrt() do CSS

Referência:A função tan() do CSS