tan()
Baseline 2023
Newly available
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.
width: calc(100px * tan(45deg));
width: calc(100px * tan(0.125turn));
width: calc(100px * tan(0.785398163rad));
width: calc(100px * tan(0.5773502));
width: calc(100px * tan(1.732 - 1));
width: calc(100px * tan(pi / 3));
width: calc(100px * tan(e));
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>
.
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.
<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
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
BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.