保持CSS三角形的角上響應

Question

這裏是JS提琴：

https://jsfiddle.net/L83gzqnf/5/

我要的是相反的角度總是45度，寬度永遠是66.6％。因此，高度需要根據寬度動態調整。

我：

$(window).load(function() { 
    var height = document.getElementById(".tri").height(); 
    var width = document.getElementById(".tri").width(); 

    document.getElementById(".tri").style.border-top = (width/tan(45)); 
}); 

正如你看到的，我可以用三角函數計算高度，但功能不工作？

Answer 1

如果我讀了你的問題正確，這撥弄應該是你追求的：https://jsfiddle.net/qkmzp1jj/

我所做的是：

1. 創建一個新的功能獲得窗口寬度（注意：不是元素的寬度）;
2. 計算該寬度的2/3;然後
3. 然後應用雙方的邊界寬度。

該函數然後在document.(ready)函數引用在網頁加載，並且當窗口被調整大小（如旋轉他們的裝置的移動用戶）爲window.(resize)功能。

Answer 2

的變化我做：

1. jquery選擇
2. 使用outerWidth()和outerHeight()代替width()和height()
3. 變化的jQuery風格的CSS
4. 添加Math.到tan()
5. 改變類以編號

width()和height()函數返回0，因爲您在CSS中將其設置爲0。 outerWidth()和outerHeight()將返回預期值。
此外，你必須添加一個onResize eventHandler來對窗口大小做出反應。

$(window).load(function() { 
 
    var height = $("#tri").outerHeight(); 
 
    var width = $("#tri").outerWidth(); 
 
    $("#tri").css("border-top", (width/Math.tan(45)) + "px solid black"); 
 
});

#tri { 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 500px solid black; 
 
    border-right: 500px solid transparent; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="tri"></div>