Css 如何倾斜div并确保宽度始终为50%？

我正在努力扭曲一个div，如下图所示。。。这样，底部和顶部始终覆盖屏幕宽度的50%（如果有意义的话）

我已经附加了更多信息的图像

编辑：这是一张photoshop图片，我正在尝试用CSS重新创建它

---

我不确定这个用例，但您可以使用2

线性渐变重新创建它。每一个都有一个三角形，将覆盖容器的一半


正文{
保证金：0；
}
.集装箱{
高度：200px；
背景：
线性渐变（左上角，蓝色50%，透明50.5%）左/50%100%无重复，
线性渐变（至右下角，蓝色50%，透明50.5%）右侧/50.5%100%无重复；
}

但它有50%的宽度。所以要清楚你的50%-->显示你想知道的结果，对不起-应该指定这是photoshop图像。。。这就是它变得多么糟糕。这就是我想要的结果。你的问题是如何计算skewX值，使结果像窗口一样宽？这不是很清楚。是的，所以我想重新创建上面的图像，但是蓝色部分应该始终是底部和顶部宽度的50%——即使屏幕大小改变。。。如果说得通的话，哇。我从来没有想过使用渐变，而是专注于倾斜div。这样更好。非常感谢。只是想让你知道，我已经应用了这个的一些变体，这正是我所需要的。再次感谢！