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

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

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

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