Css 带背景的响应倾斜div

我试图制作一个倾斜角度的div，但我不能使它响应，当屏幕变大时，布局完全中断

以下是我到目前为止所做的工作：

/*SCSS*/
*，*：之前，*：之后{
框大小：边框框；
保证金：0；
填充：0；
}
艾迪瓦先生{
位置：相对位置；
宽度：100%；
高度：400px；
背景：rgba（40,40,40,1）；
框大小：边框框；
颜色：#fff；
}
.集装箱{
位置：相对位置；
宽度：100%；
填充：40px0；
}
.货柜：之后{
位置：绝对位置；
宽度：100%；
身高：100%；
内容：''；
背景：#fff；
z指数：1；
排名：0；
边框顶部：1px纯绿色；
右：0；
底部：自动；
左：0；
变换原点：左下角；
变换：歪斜（-4deg）；
}
.测试{
身高：100%；
宽度：100%；
背景：url（'http://via.placeholder.com/1366x768');
背景尺寸：封面；
背景位置：中心；
}

内容

在您的示例中，发生了很多事情，其中大部分对您试图实现的效果毫无帮助。如果您只想切掉div的一个角，我认为最简单的解决方案是：使用一个稍微倾斜的大盒子，隐藏溢出。其子元素在相反方向上倾斜相同的量。我认为这比用白色大矩形隐藏底层内容更可靠

例如：

.cutout{
变换：歪斜（10度）；
溢出：隐藏；
宽度：100%；
高度：400px；
边框：1px纯红；
}
.内容{
背景：#eee；
变换：歪斜（-10度）；
宽度：200%；
身高：200%；
}

---

text

在您的示例中，发生了很多事情，其中大部分对您试图实现的效果毫无帮助。如果您只想切掉div的一个角，我认为最简单的解决方案是：使用一个稍微倾斜的大盒子，隐藏溢出。其子元素在相反方向上倾斜相同的量。我认为这比用白色大矩形隐藏底层内容更可靠

例如：

.cutout{
变换：歪斜（10度）；
溢出：隐藏；
宽度：100%；
高度：400px；
边框：1px纯红；
}
.内容{
背景：#eee；
变换：歪斜（-10度）；
宽度：200%；
身高：200%；
}

text

这是我的建议

倾斜div响应灵敏。在我的例子中，我使用了伪元素，如

：after

：）

*，*：之前，*：之后{
框大小：边框框；
保证金：0；
填充：0；
}
.slideddiva{宽度：100%；
文本对齐：居中；
字体大小：36px；
填充：10%25px；
背景：灰色；
颜色：#fff；
位置：相对；}
.SlidedDiva:在{内容：''之后；
左边框：99.58vw纯色灰色；
边框顶部：20px实心透明；
边框底部：43px实心透明；
底部：-43px；
位置：绝对位置；
左：-10px；}

你好

这是我的建议

倾斜div响应灵敏。在我的例子中，我使用了伪元素，如

：after

：）

*，*：之前，*：之后{
框大小：边框框；
保证金：0；
填充：0；
}
.slideddiva{宽度：100%；
文本对齐：居中；
字体大小：36px；
填充：10%25px；
背景：灰色；
颜色：#fff；
位置：相对；}
.SlidedDiva:在{内容：''之后；
左边框：99.58vw纯色灰色；
边框顶部：20px实心透明；
边框底部：43px实心透明；
底部：-43px；
位置：绝对位置；
左：-10px；}

你好