sqrt() CSS-Funktion

Syntax

/* A <number> value */
width: calc(100px * sqrt(9)); /*  300px */
width: calc(100px * sqrt(25)); /*  500px */
width: calc(100px * sqrt(100)); /* 1000px */

Parameter

Die Funktion sqrt(x) akzeptiert nur einen Wert als Parameter.

x

Eine Berechnung, die sich zu einer <number> auflöst, die größer oder gleich 0 ist.

Rückgabewert

Gibt eine <number> zurück, die die Quadratwurzel von x ist.

• Wenn x +∞ ist, ist das Ergebnis +∞.
• Wenn x 0⁻ ist, ist das Ergebnis 0⁻.
• Wenn x kleiner als 0 ist, ist das Ergebnis NaN.

Formale Syntax

<sqrt()> = 
  sqrt( <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 Quadratwurzel skalieren

Dieses Beispiel zeigt, wie die sqrt()-Funktion zur Berechnung von Größen verwendet werden kann.

HTML

<div class="boxes">
  <div class="box">50px</div>
  <div class="box one">100px</div>
  <div class="box two">150px</div>
  <div class="box three">200px</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 berechnet, indem der Wert von --size-0 (50px) mit der Quadratwurzel von 4 (2) multipliziert wird, was 100px ergibt.
• --size-2 wird berechnet, indem der Wert von --size-0 (50px) mit der Quadratwurzel von 9 (3) multipliziert wird, was 150px ergibt.
• --size-3 wird berechnet, indem der Wert von --size-0 (50px) mit der Quadratwurzel von 16 (4) multipliziert wird, was 200px ergibt.

:root {
  --size-0: 50px;
  --size-1: calc(var(--size-0) * sqrt(4)); /*  100px */
  --size-2: calc(var(--size-0) * sqrt(9)); /*  150px */
  --size-3: calc(var(--size-0) * sqrt(16)); /*  200px */
}

.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()
• hypot()
• log()
• exp()