Функция CSS hypot()

Определение и использование

CSS hypot() Функция возвращает квадратный корень из суммы квадратов своих параметров.

Возвратное значение вычисляется по формуле sqrt(x1*x1 + x2*x2 + x3*x3 .... xn*xn).

hypot() Функция принимает значения с единицами измерения, но все значения должны иметь одинаковые единицы.

Пример

Использование hypot() Установить ширину элемента:

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

Попробуйте сами

Синтаксис CSS

hypot(x1, x2, x3, ...)
Значение Описание
x1, x2, x3, ... Обязателен. Одно или несколько значений, разделенных запятыми.

Технические детали

Версия: CSS4

Поддержка браузеров

Числа в таблице указывают на версию первого браузера, который полностью поддерживает эту функцию.

Chrome Edge Firefox Safari Opera
120 120 118 15.4 106

Соответствующие страницы

См. также:Функция CSS acos()

См. также:Функция CSS asin()

См. также:Функция CSS atan2()

См. также:Функция CSS calc()

См. также:Функция CSS cos()

См. также:Функция CSS exp()

См. также:Функция CSS hypot()

См. также:Функция CSS log()

См. также:Функция CSS mod()

См. также:Функция CSS pow()

См. также:Функция sin() в CSS

См. также:Функция sqrt() в CSS

См. также:Функция tan() в CSS