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

/* 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;
}
``````

## Specifications

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

## Browser compatibility

BCD tables only load in the browser