Html 带CSS的倾斜边

我试图复制这一点，基本上：

所以基本上是两个50%并排，通过某种形式的绝对定位，我假设实现左框越过右框的顶部，红线只是表示视口的中间

有什么提示吗？谢谢：

.集装箱{ 宽度：500px； 高度：300px； 边框：1px纯黑； 位置：相对位置； 溢出：隐藏； } .box1{ 宽度：100%； 身高：100%； 背景颜色：蓝色； 变换：斜X-20度translateX-40%； 位置：绝对位置； z指数：10； } .box2{ 宽度：100%； 身高：100%； 背景色：红色； z指数：0； } 使用CSS3应该非常简单。 试试这个

.包装纸{ 溢出x：隐藏； } .外部{ 位置：绝对位置； 宽度：2000px； 左：50%； 底部：0； 左边距：-1000px； 显示器：flex； 证明内容：中心； 对齐项目：居中； } .左内{ 背景：一枝黄花； 填充：24px 48px； 弹性：1； 变换：45度； 显示器：flex； 证明内容：柔性端； } .右内{ 背景：222人； 填充：24px 48px； 弹性：1； 变换：45度； } .左文本， .右键\u文本{ 变换：倾斜-45度； 跨度{ 字号：200； 字体大小：36px； 文本转换：大写； } } .左\右文本{ 颜色：3C； } .右键\u文本{ 颜色：黄花； } 太歪斜了 跨多角度 我会这样做 这只是一个例子，不是现成的解决方案

<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>

.container {
display: flex;
}

.container div {
width: 50%;
height: 200px;
position: relative;
}

.container .left:before {
content: '';
position: absolute;
right: 0;
top: 0;
height: 100%;
transform: skewY(-1.5deg);
background: inherit;
}

---

我使用伪元素提供了一个没有转换的版本。它速度更快，不会扭曲文本

.集装箱{ 宽度：500px； 高度：300px； 边框：1px纯黑； 位置：相对位置； 溢出：隐藏； } .box1{ 宽度：50%； 身高：100%； 背景颜色：蓝色； 位置：绝对位置； 左：0； } .box1：：之后{ 背景：线性渐变至右下角，蓝色50%，透明0； 内容：； 宽度：20%； 身高：100%； 位置：绝对位置； 左：100%； z指数：1； } .box2{ 宽度：50%； 身高：100%； 背景色：红色； 位置：绝对位置； 右：0； }

---

照你的样子装裱？