javascript - 在调整窗口大小时更改 skewY Angular

Question

请不要使用 jQuery 和 SCCS(即使我在这里使用 UIkit3 进行样式设置)。导航栏有一个倾斜的背景图像，这是通过 CSS 中的线性渐变和固定高度完成的。我的方法是使用 transform: skewY 并在调整大小时更改 Angular 值。我可以在控制台中看到值发生变化，但它似乎不会影响站点。

window.onresize = function(event) {
w = window.innerWidth;
h = 140;
document.getElementById('Rhombus').style.transform="skewY('-Math.atan(h/w)*180/Math.PI )+'deg)";

alpha = Math.atan(h/w)*180/Math.PI;
console.log(w, h, -alpha);
};

Codepen

下面的容器 #Rhombus 也应该使用与标题相同的 Angular 。

Answer 1

我实际上通过使用 CSS 变量并在 JS 中更新它们找到了解决方案:

window.onresize = function(event) {
root = document.documentElement;
w = window.innerWidth;
h = 140;
alpha = Math.atan(h/w)*180/Math.PI;
document.getElementById('Rhombus').style.transform="skewY(`${-alpha}deg`)";
console.log(w, h, -alpha);
root.style.setProperty('--atan', -alpha + "deg");
root.style.setProperty('--tan', alpha + "deg");
};