tan()
Baseline 2023Newly 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 ein Wert zwischen −Unendlichkeit
und Unendlichkeit
ist. Die Funktion enthält eine einzige Berechnung, die sich entweder in eine <number>
oder ein <angle>
auflösen 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
Rückgabewert
Der Tangens eines angle
gibt immer eine Zahl zwischen −∞
und +∞
zurück.
- Wenn
angle
infinity
,-infinity
oderNaN
ist, ist das ErgebnisNaN
. - Wenn
angle
0⁻
ist, ist das Ergebnis0⁻
. - Wenn
angle
einer der Asymptotenwerte ist (wie zum Beispiel90deg
,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 Rahmen 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
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
tan() |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support