Border Size change slow on resize()
<p>I'm creating 2 triangles (using the border-<em>hack</em>), that fill the page vertically (so both triangles are 50% height of page). That I've done fine.</p>

<p>However, when I'm also trying to get this calc to run on <code>window.resize</code> it is very slow.
I'm aware I've got a few variables being calculated each time, but just wondering if anyone can think of a way to make this faster...<br>
Have a look at my <a href="http://jsfiddle.net/wigster/vuzs9/" rel="nofollow">jsfiddle</a>, and resize your browser window. - Warning the jsFiddle is likely to crash after a while.. that's how bad it is.</p>

<p>Currently the triangles work out the body width, minus the <code>.main</code> width, then divided by 2, so that the edges of the triangles just touch the side of <code>.main</code> div.<br>
It also works out the height of the window (<code>$(window).outerHeight();</code>) then divides it by 2, so that each triangle has 50% of the window height.<br>
It then also uses this height, to apply a <code>top</code> value to the 2nd triangle, so that it sits on the second half of page.</p>

<p>I suggest looking at the jsfiddle for the code, but will also put it here:</p>

<p><strong>HTML</strong></p>

<pre><code>&lt;div class="triangleWrap"&gt;
    &lt;div class="borderTopLeft"&gt;&lt;/div&gt;
    &lt;div class="borderBottomLeft"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;div class="main"&gt;&lt;/div&gt;
</code></pre>

<p><strong>JS</strong></p>

<pre><code>$('document').ready(function triangleCalc() {
    var bodyWidth = $('body').width();
    var bodyHeight = $(window).outerHeight();
    var mainWidth = $('.main').width();
    var bodyMinusMain = (bodyWidth - mainWidth) / 2;
    var bodyHeightCalc = bodyHeight / 2;
    $('.borderTopLeft, .borderBottomLeft').css('border-right', bodyMinusMain + 'px solid black');
    $('.borderTopLeft').css('border-bottom', bodyHeightCalc + 'px solid transparent');
    $('.borderBottomLeft').css({
        'border-top': bodyHeightCalc + 'px solid transparent',
        'top': bodyHeightCalc + 'px'
    });
    $(window).resize(triangleCalc);
});​
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>.borderTopLeft, .borderBottomLeft{
    width: 0;    
    height: 0;    
    position: absolute;
}
.borderTopLeft{border-top: 0 solid transparent;}
.borderBottomLeft{border-bottom: 0 solid transparent;}
.borderTopLeft{ 
    border-bottom: 500px solid transparent;       
    border-right:438px solid #2C2C2C;
}
.borderBottomLeft{
    border-top: 500px solid transparent;   
    border-right: 600px solid #2C2C2C;
    top: 500px;
}
.main{width:500px;height:400px;background:orange;margin:auto;}
</code></pre>
