此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
tan()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2023年3月.
CSS 函数 tan() 为三角函数,返回某数的正切值,此值介于 −infinity 和 infinity 之间。此函数含有单个计算式,此式须将参数结果按弧度数解析为 <number> 或 <angle>。
语法
css
/* 单个 <angle> 值 */
width: calc(100px * tan(45deg));
width: calc(100px * tan(0.125turn));
width: calc(100px * tan(0.785398163rad));
/* 单个 <number> 值 */
width: calc(100px * tan(0.5773502));
width: calc(100px * tan(1.732 – 1));
/* 其他值 */
width: calc(100px * tan(pi / 3));
width: calc(100px * tan(e));
参数
tan(angle) 函数仅接受一值作为其参数。
返回值
angle 的正切值总将返回介于 −∞ 和 +∞ 之间的数。
- 若
angle为infinity、-infinity或NaN,则结果为NaN。 - 若
angle为0−,则结果为0−。 - 若
angle为渐近线值(如90deg、270deg等),则明确不定义结果。作者须不依赖于tan()为这些输入返回任何特定值。
形式语法
<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
示例
绘制平行四边形
tan() 函数可用于绘制有指定包围盒的平行四边形。
HTML
html
<div class="parallelogram"></div>
CSS
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
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;
}
结果
[フレーム]
规范
| Specification |
|---|
| CSS Values and Units Module Level 4 # trig-funcs |
浏览器兼容性
Loading...