hypot() CSS-Funktion

Syntax

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

Parameter

Die Funktion hypot(x [, ...]#) akzeptiert eine oder mehrere durch Kommas getrennte Berechnungen als Parameter.

x, x2, ..., xN

Eine Berechnung, die zu einer <number>, <dimension>, oder <percentage> aufgelöst wird.

Rückgabewert

Gibt eine <number>, <dimension>, oder <percentage> zurück (basierend auf den Eingaben), was die Quadratwurzel der Summe der Quadrate ihrer Parameter ist.

• Wenn einer der Eingaben unendlich ist, ist das Ergebnis +∞.
• Wenn ein einziger Parameter zur Verfügung gestellt wird, ist das Ergebnis der absolute Wert seiner Eingabe. hypot(2em) und hypot(-2em) lösen sich beide zu 2em auf.

Formale Syntax

<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        

Beispiele

Größen basierend auf der hypot-Funktion

Dieses Beispiel zeigt, wie Sie die hypot()-Funktion verwenden können, um Größen zu berechnen.

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

Hier verwenden wir CSS-Custom Properties, um die zu verwendenden Größen zu definieren. Zuerst deklarieren wir die erste Größe (--size-0), die dann zur Berechnung der anderen Größen verwendet wird.

• --size-1 wird mit der Hypotenuse von --size-0 (100px) berechnet. Dies nimmt den Quadratwert und da es keinen anderen Wert gibt, gibt es die Quadratwurzel des Wertes zurück, was zu 100px führt.
• --size-2 wird mit der Hypotenuse von --size-0 (100px), zweimal, berechnet. Dies nimmt das Quadrat des Wertes (100px * 100px = 10000px²) und fügt es dem Quadrat von --size-0 wieder hinzu (10000px² + 10000px² = 20000px²) und gibt die Quadratwurzel der Summe (√(20000px²)) zurück, was zu 141.42px führt.
• --size-3 wird mit der Hypotenuse --size-0 * 1.5 (150px) und --size-0 * 2 (200px) berechnet. Das Ergebnis ist die Quadratwurzel der Summe ihrer Quadrate: Die Werte werden quadriert (22500px² und 40000px²) und zusammenaddiert (62500px²), wobei die Summe quadriert wird (√(62500px²)) und 250px ergibt.

: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;
}

Die Größen werden dann als width und height Werte der Selektoren angewendet.

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

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

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