CSS 函数 - tan（）

CSS 函数 tan（） 是一个三角运算，它计算给定数字的正切值并返回负无穷大到无穷大范围内的值。

此函数执行单个计算并将输入解释为弧度，输出可以是 <number> 或 <angle>。

可能的值

函数 tan（angle） 只接受单个值作为参数。

angle - 产生<number> 或 <angle> 的计算。当使用无单位数字时，它们应被理解为以弧度表示 <angle>的度量。

返回值

角度的切线将始终给出一个介于 -∞ 和 +∞ 之间的值。

如果角度为无穷大、-无穷大或 NaN，则结果为 NaN。
如果角度为 0⁻，则结果为 0⁻。
如果角度对应于渐近线值（例如 90 度、270 度等），则结果是明确未定义的。不应期望 tan（） 为这些输入提供任何特定值。

语法


 tan( <calc-sum> )

CSS tan（） - 绘制梯形

CSS 变量用于定义梯形的尺寸和倾斜角度。

calc（） 函数根据 tan（） 函数计算梯形的宽度。

每个梯形都表示为一个 div 元素，其类为 .trapezoid。


<html>
<head>
<style>
	 	.trapezoid {
	 	 	 --top-width: 100px;	
	 	 	 --bottom-width: 200px;	
	 	 	 --height: 150px;	
	 	 	 --skew-angle: 30deg;
	 	 	 width: calc(100px + (2 * var(--height) / tan(var(--skew-angle))));
	 	 	 height: var(--height);
	 	 	 background-color: skyblue;	
	 	 	 transform: skewX(var(--skew-angle));
	 	 	 margin-bottom: 20px;	
	 	 	 margin-left: 40px;
	 	}
</style>
</head>
<body>
<div class="trapezoid"></div>
<div class="trapezoid"></div>
</body>
</html>

本页