CSS 函数 tan() 是一个三角函数，它计算给定数字的正切并返回 -无穷大到无穷大范围内的值。
此函数执行单个计算并解释输入作为弧度，输出可以是 <number> 或 <angle>。
可能的值
函数 tan(angle) 仅接受单个值作为参数。- angle - 生成 <number> 或 <angle> 的计算。当使用无单位数字时，它们应被理解为以弧度为单位的度量，表示 <angle>。
返回值
角度的正切总是给出一个值介于 -∞ 和 +∞ 之间。
如果角度为无穷大、负无穷大或 NaN，则结果为 NaN。
如果角度为 0⁻，则结果为 0⁻。
如果角度对应于渐近线值（例如 90deg、270deg 等），结果是明确未定义的。作者不应期望 tan() 为这些输入提供任何特定值。
语法
tan( <calc-sum> ) CSS tan(): 绘制梯形
CSS 变量用于定义梯形的尺寸和倾斜角度。
calc() 函数计算基于 tan() 函数的梯形宽度。
每个梯形都表示为类为 .trapezoid 的 div 元素。
<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>