CSS3旋转或边框 - 问题

Question

我试图这样做：

让我解释一下：
- 黑色是我的背景
- 灰色块是我的png标志
- 蓝色/红色是2 div

目前我有这个（浏览器分辨率：1920x927px）并且它非常完美，但我没有设法适应/找到解决方案到其他分辨率：

    <div class="l-content"></div>
    <div class="l-content2"></div>

    <style>
        .l-content{
            position: absolute;
            border-bottom:960px solid red;
            border-left:0px solid transparent;
            border-right:550px solid transparent;
            width: 1200px;
            height: 0;
            left: 0;
            top: 0;
            opacity:0.5;
        }
        .l-content2{
            position: absolute;
            border-bottom:960px solid blue;
            border-right:0px solid transparent;
            border-left:550px solid transparent;
            width: 1200px;
            height: 0;
            right: 0;
            top: 0;
            opacity:0.5;
        }
    </style>

我尝试使用变换旋转，但我没有找到好方法......

所以，它适用于我的解决方案，但我想为所有分辨率灵活地做... 你有什么想法 ？解决方案？

以下是一个例子：http://codepen.io/anon/pen/jfqIe如果我减少包装纸的宽度和/或高度，一切都会被打破......

THX