在日常開發中，我們經常用 calc()、var() 來讓樣式變得動態可控。但其實，CSS 還能做更“數學化”的計算——從 CSS Values Level 4 開始，瀏覽器支持了 sin()、cos()、tan() 等三角函數。 這意味着，我們在樣式中，也能像在 JavaScript 裏那樣，直接用角度計算出幾何關係，讓佈局、動畫更自然、更精準。

一、CSS 三角函數是什麼？

CSS 中新增的三角函數包括：

sin(angle)   /* 正弦 */
cos(angle)   /* 餘弦 */
tan(angle)   /* 正切 */

這些函數接收角度值（如 30deg、1rad），返回一個無單位的數字結果，可以和 calc() 或 CSS 變量結合使用。

舉個最簡單的例子：

.box {
  --angle: 30deg;
  --base: 200px;
  width: var(--base);
  height: calc(tan(var(--angle)) * var(--base));
  background: lightblue;
}

上面這段代碼的含義是： 讓一個盒子的高度，等於“底邊長度 × 角度的正切值”。 如果 --angle 是 30°，那 tan(30°) 約為 0.577，所以盒子高度會自動變成約 115.40px。 這種寫法的好處是：角度一改，斜率自動更新。

二、和 JavaScript 不同，CSS 不需要寫邏輯

過去如果想做類似效果，通常我們會寫這樣的 JavaScript：

const angle = 30 * Math.PI / 180;
const height = Math.tan(angle) * 100;
element.style.height = `${height}px`;

但現在，CSS 就能直接完成同樣的計算，而且是實時響應變量變化的。 比如我們把角度綁定成 CSS 變量：

:root {
  --angle: 20deg;
}
.triangle {
  --base: 200px;
  width: var(--base);
  height: calc(tan(var(--angle)) * var(--base));
  background: #ffb347;
  clip-path: polygon(00, 100%0, 100%100%);
  transition: height 0.3s;
}
.triangle:hover {
  --angle: 40deg;
}

鼠標懸停時，高度會隨角度變化自動調整，這就是 “純 CSS 動態幾何” 的魅力。

，時長00:15

三、三角函數在佈局中的幾個實用場景

1、 斜切卡片或橫幅

如果你做一個帶斜邊的卡片或 banner，通常需要計算傾斜後的高度偏移。 用 tan() 就能讓 CSS 自動幫你算出那條斜線的比例。

.banner {
  --angle: 10deg;
  --width: 100vw;
  height: calc(tan(var(--angle)) * var(--width));
  background: linear-gradient(to right, #4facfe, #00f2fe);
 clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - tan(var(--angle))    * 100%));
}

這樣，調整 --angle，整條斜邊會自動重算，不需要 Photoshop 或硬編碼數值。

2、 環形 / 扇形佈局

做類似儀表盤、雷達圖、圓形菜單時，CSS 的 sin() 和 cos() 也能派上用場：

.menu-item {
  position: absolute;
  --radius: 120px;
  --angle: 45deg; /* 每個菜單不同角度 */
  left: calc(50% + var(--radius) * cos(var(--angle)));
  top:  calc(50% + var(--radius) * sin(var(--angle)));
  transform: translate(-50%, -50%);
}

這種方式讓你可以純 CSS 計算每個元素的座標，實現圓形分佈，無需額外 JS 邏輯。

3、 旋轉元素的偏移修正

旋轉一個元素後，有時需要讓它“視覺居中”，否則會錯位。 通過 sin()、cos()，可以算出旋轉後產生的偏移量：

.rotated {
  --angle: 30deg;
  transform: rotate(var(--angle))
  translateX(calc(-50% * sin(var(--angle))));
}

這種計算方式讓動畫過渡更自然，尤其是在複雜 UI 中需要“視覺居中”的情況下。

四、瀏覽器支持與注意事項

• Chrome 111+、Edge 111+、Safari 17+、Firefox 116+ 已全面支持；
• 函數返回值是 無單位數值；
• 可以嵌套在 calc()、var()、min()、max() 中；
• 建議角度使用 deg，便於直觀理解；
• 如果要兼容舊瀏覽器，可以提供 fallback 值，例如：

height: 50px;
height: calc(tan(30deg) * 100px);

五、總結

CSS 三角函數讓樣式擁有了“數學的靈魂”。 它不再只是靜態的描述，而是能根據角度、比例、變量實時變化，做到以前只有腳本才能實現的幾何佈局。

在一些需要斜線、旋轉、幾何圖形的設計中，合理運用 tan()、sin()、cos() 可以讓代碼更簡潔、響應更自然。 不過，對於普通佈局場景，它仍然是“錦上添花”的工具，而非剛需。

下次當你需要在樣式中表達角度關係，不妨試着寫一行：

height: calc(tan(20deg) * 200px);

你會發現，數學和美學，在 CSS 中其實可以完美融合。