Javascript JS/CSS旋转div在任何屏幕中间相遇 所以我试着在45度旋转2分贝，但是我需要它们在中间相遇。

我试过了我能想到的一切，让这些div在窗子中间相遇，但是可以让它工作。 下面是一个解释目标的JSFIDLE。

另外，这些必须是两个独立的元素，以便我可以分别设置它们的动画

以下是我迄今为止所做的：

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


});

#容器{
位置：绝对位置；
z指数：1；
宽度：100%；
身高：100%；
溢出：隐藏；
}
格林先生{
背景：绿色；
位置：绝对位置；
-ms变换：旋转（45度）；
-webkit变换：旋转（45度）；
变换：旋转（45度）；
}
布鲁伯格先生{
背景：蓝色；
位置：绝对位置；
-ms变换：旋转（45度）；
-webkit变换：旋转（45度）；
变换：旋转（45度）；
}
$（文档）.ready（函数（）{
var wH=$（窗口）.height（），
wW=$（窗口）.width（），
偏移量=wW/2，
对角线=数学sqrt（wH*wH+wW*wW），
对角线中间=对角线/2；
console.log（'wH'，wH）；
console.log（'wW'，wW）；
控制台日志（“对角线”，对角线）；
console.log（'diagonalMid'，diagonalMid）；
console.log（'offset'，offset）；
$（'.greenBG'）.css({
高度：wW+‘px’，
宽度：wW+‘px’，
左：'-'+offset+'px'，
顶部：'-'+偏移量+'px'
});
$（'.blubg'）.css({
高度：wW+‘px’，
宽度：wW+‘px’，
右：'-'+offset+'px'，
底部：'-'+偏移量+'px'
});
});

请检查此链接

.top{
顶部：6px；
左：10px；
宽度：0；
身高：0；
z指数：100；
左边框：60px实心透明；
右边框：60px实心透明；
边框底部：60px纯黑；
}
.底部{
位置：绝对位置；
宽度：0；
身高：0；
z指数：99；
左边框：60px实心透明；
右边框：60px实心透明；
边框顶部：60px纯红；
}

---

您可以使用skew变换div

#容器{
宽度：80%；
高度：300px；
边框：纯黑1px；
位置：相对位置；
溢出：隐藏；
}
格林先生{
宽度：100%；
身高：100%；
顶部：0px；
右：50%；
位置：绝对位置；
边框：实心1px绿色；
变换：skewX（-45度）；
溢出：隐藏；
}
布鲁伯格先生{
宽度：100%；
身高：100%；
顶部：0px；
左：50%；
位置：绝对位置；
边框：纯色1px蓝色；
变换：skewX（-45度）；
溢出：隐藏；
}
.innerGreen{
位置：绝对位置；
顶部：0px；
右：0px；
宽度：100%；
身高：100%；
变换：skewX（45度）；
变换原点：右上角；
背景：线性渐变（白色、绿色）；
}
.innerBlue{
位置：绝对位置；
顶部：0px；
左：0px；
宽度：100%；
身高：100%；
变换：skewX（45度）；
变换原点：左下角；
背景：线性梯度（白色、蓝色）；
}

像这样的吗？谢谢你的尝试，但我需要两个单独的元素。我知道如何做的边界三角形技巧，但真的需要2个元素，以便我可以动画他们独立。谢谢如果你能把它旋转45度，使它伸展以适应屏幕，那么我认为它可能会工作。谢谢我们可以设置它的css，我也可以这样做，你也可以在这里再次检查，更近一些…但是，大小需要拉伸以填充屏幕。宽度：100%；身高：100%。现在你有固定的尺寸。