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.
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));
Parameters
Return value
The tangent of an angle
will always return a number between −∞
and +∞
.
- If
angle
isinfinity
,-infinity
, orNaN
, the result isNaN
. - If
angle
is0⁻
, the result is0⁻
. - If
angle
is one of the asymptote values (such as90deg
,270deg
, etc.), the result is explicitly undefined. Authors must not rely ontan()
returning any particular value for these inputs.
Formal syntax
Examples
Drawing parallelograms
The tan()
function can be used to draw a parallelogram with a given bounding box.
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;
}
Result
Specifications
Specification |
---|
CSS Values and Units Module Level 4 # trig-funcs |
Browser compatibility
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