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

css
/* 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 sich in eine <number> oder ein <angle> auflöst. Bei der Angabe von zahlenlosen Zahlen werden diese als eine 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 infinity, -infinity oder NaN ist, ist das Ergebnis NaN.
  • Wenn angle 0⁻ ist, ist das Ergebnis 0⁻.
  • Wenn angle einer der Asymptotenwerte ist (wie zum Beispiel 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

Zeichnen von Parallelogrammen

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

HTML

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

CSS

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 GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
tan()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

Siehe auch