CSS 函数 - tan()

CSS 函数tan()是一个三角函数运算，它计算给定数字的正切值，并返回一个范围在-infinity到infinity之间的值。

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

可能的值

函数tan(angle)只接受单个值作为参数。

angle - 一个计算结果为<number>或<angle>的计算表达式。当使用无单位数字时，应理解为以弧度为单位的度量，表示一个<angle>。

返回值

角度的正切值始终在-∞和+∞之间。

如果angle是infinity、-infinity或NaN，则结果为NaN。
如果angle是0⁻，则结果是0⁻。
如果angle对应于渐近线值（例如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>

打印页面