tan()
Baseline 2023
Newly available
Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
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 einzelne Berechnung, die entweder zu einer <number>
oder einem <angle>
aufgelöst werden muss, indem das Ergebnis des Arguments als Radiant 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
Rückgabewert
Der Tangens eines angle
wird immer eine Zahl zwischen −∞
und +∞
zurückgeben.
- Wenn
angle
infinity
,-infinity
oderNaN
ist, ist das ErgebnisNaN
. - Wenn
angle
0⁻
ist, ist das Ergebnis0⁻
. - Wenn
angle
einer der Asymptotenwerte ist (wie90deg
,270deg
, etc.), ist das Ergebnis explizit undefiniert. Autoren dürfen sich nicht darauf verlassen, dasstan()
für diese Eingaben einen bestimmten Wert zurückgibt.
Formale Syntax
Beispiele
Zeichnen von Parallelogrammen
Die tan()
Funktion kann verwendet werden, um ein Parallelogramm mit einem gegebenen Begrenzungsrahmen zu zeichnen.
HTML
<div class="parallelogram"></div>
CSS
.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
Specification |
---|
CSS Values and Units Module Level 4 # trig-funcs |
Browser-Kompatibilität
BCD tables only load in the browser