hypot()

The hypot(x [, ...]#) function accepts one or more comma-separated calculations as its parameters.

x, x2, ..., xN

A calculation that resolves to a <number>, <dimension>, or <percentage>.

Returns a <number>, <dimension>, or <percentage> (based on the inputs), which is the square root of the sum of squares of its parameters.

• If any of the inputs is infinite, the result is +∞.
• If a single parameter is provided, the result is the absolute value of its input. hypot(2em) and hypot(-2em) both resolve to 2em.

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

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

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

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

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

This example shows how you can use the hypot() function to calculate sizes.

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

Here we are using CSS custom properties to define the sizes to be used. First we declare the first size (--size-0) which is then used to calculate the other sizes.

• --size-1 is calculated with the hypotenuse of --size-0 (100px). This takes the square value and, as there is no other value, returns the square root of the value, which results in 100px.
• --size-2 is calculated with the hypotenuse of --size-0 (100px), twice. This takes the square of the value (100px * 100px = 10000px²) and adds it to the square of --size-0 again (10000px² + 10000px² = 20000px²) and returns the square root of the sum (√(20000px²)), which results in 141.42px.
• --size-3 is calculated with the hypotenuse --size-0 * 1.5 (150px) and --size-0 * 2 (200px). The result is the square root of the sum of their squares: The values are squared (22500px² and 40000px²) and added together (62500px²), with the sum sum square-rooted (√(62500px²)) being 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;
}

The sizes are then applied as the width and height values of the selectors.

.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);
}

Result

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