はここ応答

Question

にCSSの三角形の角度をキープ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. は、2辺の境界幅を適用します。

この関数は、ページのロードとウィンドウが（例えば、それらのデバイスを回転移動ユーザとして）サイズ変更された場合のwindow.(resize)機能にためdocument.(ready)関数で参照されています。

Answer 2

私がやった変更：

1. jQueryのセレクタ
2. 代わりwidth()とheight()
3. 変化を利用outerWidth()とouterHeight() jQueryのスタイルでCSS
4. はMath.
tan()に変更されたクラスを追加しますto id

width()とheight()は、CSSで0に設定されているため、関数は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>