tan()
**tan()
** CSS 函数 是一个三角函数,它返回一个数字的正切值,该值介于 −infinity
和 infinity
之间。该函数包含单个计算,该计算必须通过将参数的结果解释为弧度来解析为 <number>
或 <angle>
。
语法
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));
参数
返回值
angle
的正切值将始终返回一个介于 −∞
和 +∞
之间的数字。
- 如果
angle
是infinity
、-infinity
或NaN
,则结果为NaN
。 - 如果
angle
是0⁻
,则结果为0⁻
。 - 如果
angle
是渐近值之一(例如90deg
、270deg
等),则结果为 *显式未定义*。作者 *不得* 依赖tan()
对这些输入返回任何特定值。
正式语法
示例
绘制平行四边形
tan()
函数可用于绘制具有给定边界框的平行四边形。
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;
}
结果
规范
规范 |
---|
CSS 值和单位模块级别 4 # trig-funcs |
浏览器兼容性
BCD 表格仅在浏览器中加载