Html 容器旁边带有渐变的CSS形状

我正试图为我们正在建设的网站做一个具体的设计。收割台上方需要一个平行四边形，容器右侧需要一个梯形，如下所示

我已经设法在容器上方添加了平行四边形，但是我正在努力将元素添加到容器的右侧。下面显示了我所做的

HTML

满足于此

CSS

.container{
宽度：700px；
}
.货柜：在{
内容：''；
宽度：100%；
高度：30px；
变换：倾斜（45度）；
背景#254896；
背景：线性梯度（90度，#254896，#2c2b5b 100%）；
显示：块；
}
.行{
背景#f8f9fa；
}
在先{
内容：''；
宽度：100%；
身高：0；
边界图像源：线性梯度（90度，#FF0000，#940202）；
边界图像切片：1；
边框顶部：30px纯红；
左边框：30px实心透明；
位置：绝对位置；
左：800px；
顶部：30px；
}
上校{
背景色：#ddd；
填充：10px；
}  

我面临的问题是：

• 使红色形状整齐地位于容器右侧，而不考虑屏幕大小
• 在梯形形状上放置渐变填充。如果我使用边界图像源，它会使形状成为矩形

---

任何帮助都将不胜感激。

这里有一个使用多个背景的想法。我使用了

400px

而不是

700px

来更好地查看代码片段

正文{
溢出x：隐藏；
}
.集装箱{
--w:400px；
最大宽度：var（--w）；
位置：相对位置；
利润率：40px自动；
}
.货柜：在{
内容：''；
位置：绝对位置；
顶部：-20px；
左：0；
宽度：计算（50vw+var（-w）/2）；
最小宽度：100%；
高度：40px；
变换：倾斜（45度）；
变换原点：顶部；
背景：
线性梯度（90度，#254896，#2c2b5b 100%）左上角/var（--w）50%，
线性梯度（90度，#FF0000，#940202）右下角/计算值（100%-var（--w））50%；
背景重复：无重复；
}
.行{
背景#f8f9fa；
}
上校{
填充：10px；
}

满足于此

另一种方法是在容器div中使用指定百分比的2个平行四边形

    .row::before {
      content: '';
        width: calc(70% - 14px);
        height: 30px;
        transform: skew(45deg);
        background: #254896;
        background: linear-gradient(90deg, #254896, #2c2b5b 100%);
    }

    .row::after {
        content: '';
        width: calc(30% - 14px);
        height: 30px;
        position: absolute;
        right: 0;
        top: 30px;            
        transform: skew(45deg);
        background: red;
        background: linear-gradient(90deg, #FF0000, #940202);
    }

---

看起来很棒。唯一的问题是我的页面不是固定宽度的。它使用标准的引导断点。如何设置--w变量以匹配主容器的宽度？我没有太多使用CSS变量。@scarrott使用媒体查询进行更新，就像bootstrap所做的那样（稍后将更新，包括bootstrap），不幸的是，这确实会使内容偏离中心。不过，在其他情况下，我肯定可以看到它的一些用途。