tan() CSS function

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

Parameters

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 is explicitly undefined. Authors must not rely on tan() returning any particular value for these inputs.

Formal 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        

Examples

Drawing parallelograms

The tan() function can be used to draw a parallelogram with a given bounding box.

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

Result

Specifications

Browser compatibility

See also

• sin()
• cos()
• asin()
• acos()
• atan()
• atan2()
• Using CSS typed arithmetic