I’m creating 2 triangles (using the border- hack ), that fill the page vertically

Question

0

Asked: June 11, 20262026-06-11T13:02:24+00:00 2026-06-11T13:02:24+00:00

I’m creating 2 triangles (using the border- hack ), that fill the page vertically

0

I’m creating 2 triangles (using the border-hack), that fill the page vertically (so both triangles are 50% height of page). That I’ve done fine.

However, when I’m also trying to get this calc to run on window.resize 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…
Have a look at my jsfiddle, and resize your browser window. – Warning the jsFiddle is likely to crash after a while.. that’s how bad it is.

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

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

HTML

<div class="triangleWrap">
    <div class="borderTopLeft"></div>
    <div class="borderBottomLeft"></div>
</div>

<div class="main"></div>

JS

$('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);
});

CSS

.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;}