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>

列印頁面