JS/CSS Rotated DIVS to meet in the middle of any screen

So I am trying to rotate 2 divs so at 45 degrees, but I need them to meet in the middle.

I have tried everything I can think of to get these divs to meet in the middle of the window but just can get it to work.

Here is a JSfiddle that explains the goal. http://ift.tt/1D3Cl8g

P.S. these must be 2 separate elements so I can animated them individually.

Here is what I have thus far:

<div id="container">
        <div class="greenBG"></div>
        <div class="blueBG"></div>
</div>


#container {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.greenBG {
    background: green;
    position: absolute;
    -ms-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    transform: rotate(45deg);
}

.blueBG {
    background: blue;
    position: absolute;
    -ms-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    transform: rotate(45deg);
}



$(document).ready(function() {
    var wH = $(window).height(),
        wW = $(window).width(),
        offset = wW/2, 
        diagonal = Math.sqrt(wH*wH + wW*wW),
        diagonalMid = diagonal/2;

        console.log('wH',wH);
        console.log('wW',wW);
        console.log('diagonal',diagonal);
        console.log('diagonalMid',diagonalMid);
        console.log('offset',offset);

    $('.greenBG').css({
        height: wW + 'px',
        width: wW + 'px',
        left: '-'+offset+'px',
        top: '-'+offset+'px'
    });
    $('.blueBG').css({
        height: wW + 'px',
        width: wW + 'px',
        right: '-'+offset+'px',
        bottom: '-'+offset+'px'
    });


});