Html CSS：制作两个互补的对角div

这就是我想做的：

这就是我试图做到的： 第一个div“subcontc1”工作正常，即使它脱离了页面。如果我对第二个执行相同的操作，那么这次滚动会出于相同的原因激活

.1{
背景色：蓝紫色；
位置：绝对位置；
左-20%；
排名：0；
宽度：70%；
身高：100%；
变换：倾斜（-20度）；
边框：2倍纯黄色；
}
.2{
宽度：50%；
身高：100%；
边框：2倍纯色灰色；
z指数：1000；
溢出：隐藏；
}

您可以使用背景渐变来伪装它：

.mybox{
边框：实心；
背景：线性梯度（100度，蓝色49.75%，黑色50%，黑色钙（50%+3px），绿色钙（50%+4px））；
显示器：flex；
边缘：1米；
}
.mybox分区{
填料：1米2%；
弹性：1；
颜色：白色；
}

第一组
第二组
第一部分第二行
第二组

我为我的一个项目制作了这个，这个项目有一个倾斜的手柄，它支持使用javascript制作动画，但我取出了这些手柄，按照您提到的设计使其原始而简单。希望有帮助

#包装器{
位置：相对位置；
宽度：100%；
最小高度：300px；
溢出：隐藏；
z指数：100；
边框：2件纯黑；
}
.层{
位置：绝对位置；
宽度：100vw；
最小高度：300px；
溢出：隐藏；
边框：2件纯黑；
}
.layer.content wrap{
位置：绝对位置；
宽度：100vw；
最小高度：300px；
}
.layer.content正文{
宽度：25%；
位置：绝对位置；
最高：40%；
文本对齐：居中；
转化：translateY（-50%）；
}
.底部{
背景：绿色；
z指数：101；
}
.bottom.content正文{
右：10%；
}
.顶{
背景：红色；
颜色：#222；
z指数：102；
宽度：50vw；
}
.top.content正文{
左：5%；
颜色：#222；
}
.歪斜的.顶部{
变换：倾斜（-20度）；
左边距：-1000px；
宽度：计算（50vw+1000px）；
}
.skewed.top.content wrap{
变换：倾斜（20度）；
左边距：1000px；
}

知识产权是一种权利，是一种权利，是一种权利

洛雷姆·伊普斯姆·多洛尔·希特（Lorem ipsum Door sit amet）是一位杰出的职业者，他是一名临时劳工

您指的是哪个滚动条？X还是Y？