Функция CSS `hypot()`

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

В то время как pow() и sqrt() работают только с числами без единиц измерения, hypot() принимает значения с единицами измерения, но все они должны иметь одинаковый тип.

Синтаксис

/* A <number> value */
width: hypot(2em); /* 2em */
width: hypot(3em, 4em); /* 5em */
width: hypot(30px, 40px); /* 50px */
width: hypot(48px, 64px); /* 80px */
width: hypot(3px, 4px, 5px); /* 7.0710678118654755px */

Параметры

Функция 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> | '/' <number> ]*

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

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

Примеры

Размеры на основе функции hypot

В этом примере показано, как можно использовать функцию 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 */
}

.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.box {
  width: var(--size-0);
  height: var(--size-0);
  background-color: tomato;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

Затем эти размеры задаются в качестве значений 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()