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>
