W3cubDocs

/CSS

tan()

The tan() CSS function is a trigonometric function that returns the tangent of a number, which is a value between −infinity and infinity. The function contains a single calculation that must resolve to either a <number> or an <angle> by interpreting the result of the argument as radians.

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

The tan(angle) function accepts only one value as its parameter.

angle: A calculation which resolves to a <number> or an <angle>. When specifying unitless numbers they are interpreted as a number of radians, representing an <angle>.

Return value

The tangent of an angle will always return a number between −∞ and +∞.

If angle is infinity, -infinity, or NaN, the result is NaN.
If angle is 0⁻, the result is 0⁻.
If angle is one of the asymptote values (such as 90deg, 270deg, etc), the result must be ∞ for 90deg and all values a multiple of 360deg from that (such as -270deg or 450deg), and −∞ for -90deg and all values a multiple of 360deg from that (such as -450deg or 270deg).

Formal syntax

<tan()> = 
  tan( <calc-sum> )  

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<calc-product> = 
  <calc-value> [ [ '*' | '/' ] <calc-value> ]*  

<calc-value> = 
  <number>         |
  <dimension>      |
  <percentage>     |
  <calc-constant>  |
  ( <calc-sum> )   

<calc-constant> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

Examples

Draw parallelograms

The tan() function can be used draw a parallelogram.

HTML

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

CSS

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

Result

Specifications

Specification
CSS Values and Units Module Level 4 # trig-funcs

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`tan`	111	111	108	No	97	15.4	111	111	108	No	15.4	No