在日常開發中，我們經常用 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 中其實可以完美融合。
