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
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
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
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;
}
Result
Specifications
Specification |
---|
CSS Values and Units Module Level 4 # trig-funcs |
Browser compatibility
BCD tables only load in the browser