tan()

Die tan() CSS Funktion ist eine trigonometrische Funktion, die den Tangens einer Zahl zurückgibt, welcher einen Wert zwischen −unendlich und unendlich darstellt. Die Funktion enthält eine einzige Berechnung, die auf ein <number> oder ein <angle> aufgelöst werden muss, indem das Ergebnis des Arguments als Bogenmaß interpretiert wird.

Syntax

/* Single <angle> values */
width: calc(100px * tan(45deg));
width: calc(100px * tan(0.125turn));
width: calc(100px * tan(0.785398163rad));
/* Single <number> values */
width: calc(100px * tan(0.5773502));
width: calc(100px * tan(1.732 - 1));
/* Other values */
width: calc(100px * tan(pi / 3));
width: calc(100px * tan(e));

Parameter

Die tan(angle)-Funktion akzeptiert nur einen Wert als Parameter.

angle

Eine Berechnung, die auf ein <number> oder ein <angle> aufgelöst wird. Bei der Angabe von einheitenlosen Zahlen werden diese als Anzahl von Bogenmaßen interpretiert, die ein <angle> darstellen.

Rückgabewert

Der Tangens eines angle gibt immer eine Zahl zwischen −∞ und +∞ zurück.

• Wenn angle unendlich, -unendlich oder NaN ist, ist das Ergebnis NaN.
• Wenn angle 0− ist, ist das Ergebnis 0−.
• Wenn angle einer der Asymptotenwerte ist (wie 90deg, 270deg, etc.), ist das Ergebnis explizit undefiniert. Autoren dürfen sich nicht darauf verlassen, dass tan() für diese Eingaben einen bestimmten Wert zurückgibt.

Formale Syntax

<tan()> = 
 tan( <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

Parallelogramme zeichnen

Die tan()-Funktion kann verwendet werden, um ein Parallelogramm mit einem gegebenen Begrenzungsrahmen zu zeichnen.

HTML

<div class="parallelogram"></div>

CSS

body {
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
}

.parallelogram {
 --w: 400;
 --h: 200;
 --angle: 30deg;
 position: relative;
 width: calc(1px * var(--w));
 height: calc(1px * var(--h));
}
.parallelogram::before {
 content: "";
 position: absolute;
 width: calc(100% - 100% * var(--h) / var(--w) * tan(var(--angle)));
 height: 100%;
 transform-origin: 0 100%;
 transform: skewX(calc(0deg - var(--angle)));
 background-color: red;
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• sin()
• cos()
• asin()
• acos()
• atan()
• atan2()
• CSS-Typen-Arithmetik verwenden