hypot()

Функция hypot(x [, ...]#) принимает один или несколько разделенных запятыми вычислений в качестве параметров.

x, x2, ..., xN

Вычисление, которое разрешается до <number>, <dimension> или <percentage>.

Возвращает <number>, <dimension> или <percentage> (в зависимости от входных данных), который является квадратным корнем из суммы квадратов своих параметров.

• Если любой из входных данных является infinite, результат +∞.
• Если предоставлен единственный параметр, результат — абсолютное значение его входного значения. hypot(2em) и hypot(-2em) оба разрешаются до 2em.

<hypot()> = 
  hypot( <calc-sum># )  

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<calc-product> = 
  <calc-value> [ [ '*' | '/' ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN        

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

HTML

<div class="boxes">
  <div class="box">100px</div>
  <div class="box one">100px</div>
  <div class="box two">141.42px</div>
  <div class="box three">250px</div>
</div>

CSS

Здесь мы используем CSS пользовательские свойства для определения размеров, которые будут использоваться. Сначала мы объявляем первый размер (--size-0) который затем используется для вычисления других размеров.

• --size-1 рассчитывается с помощью гипотенузы --size-0 (100px). Это принимает квадратное значение и, поскольку другого значения нет, возвращает квадратный корень из значения, что приводит к 100px.
• --size-2 рассчитывается с помощью гипотенузы --size-0 (100px), дважды. Это возводит значение в квадрат (100px * 100px = 10000px²) и добавляет его к квадрату --size-0 снова (10000px² + 10000px² = 20000px²) и возвращает квадратный корень из суммы (√(20000px²)), что составляет 141,42px.
• --size-3 рассчитывается с помощью гипотенузы --size-0 * 1,5 (150px) и --size-0 * 2 (200px). Результатом является квадратный корень из суммы их квадратов: значения возводятся в квадрат (22500px² и 40000px²) и складываются (62500px²), а сумма извлекается из квадратного корня (√(62500px²)), что составляет 250px.

:root {
  --size-0: 100px;
  --size-1: hypot(var(--size-0)); /*  100px */
  --size-2: hypot(var(--size-0), var(--size-0)); /*  141.42px */
  --size-3: hypot(
    calc(var(--size-0) * 1.5),
    calc(var(--size-0) * 2)
  ); /*  250px */
}

Затем размеры применяются как значения width и height селекторов.

.one {
  width: var(--size-1);
  height: var(--size-1);
}
.two {
  width: var(--size-2);
  height: var(--size-2);
}
.three {
  width: var(--size-3);
  height: var(--size-3);
}

Результат

• pow()
• sqrt()
• log()
• exp()