如何使用css在倾斜的父容器中创建另一个倾斜容器

我正在使用倾斜创建一个简单的布局，我的布局如下：

我想要的是这样的：

我的问题是我不能在父容器中使用skew进行另一个div。 以下是我的CSS和HTML：

/***VCONTENT***/
#v形容器{
位置：相对位置；
背景：#000；
}
#主页内容横幅{
边缘顶部：50px；
边缘底部：90像素；
位置：相对位置；
文本对齐：居中；
z指数：0；
背景：#000；
}
#主页内容横幅h1{
字体系列：时代新罗马；
颜色：#fff；
字号：80px；
利润率最高：35%；
}
#主页横幅图像{
背景图像：url（'../images/top banner full.png'）；
背景重复：无重复；
位置：相对位置；
左侧填充：0px；
右边填充：0px；
最大宽度：100%；
最大高度：100%；
背景大小：100%；
高度：950px；
最小高度：950px；
边缘底部：150px；
}
#滚动底部{
颜色：#fff；
利润率最高：16%；
字体系列：blueHighway；
}
#滚动底部：悬停{
光标：指针；
颜色：#FFF100；
}
#关于我们的主页{
高度：300px；
位置：相对位置；
宽度：100%；
左侧填充：0px；
右边填充：0px；
背景：#fff；
}
#关于我们的主页：：以前{
内容：''；
宽度：100%；
身高：100%；
位置：绝对位置；
背景：继承；
z指数：0；
底部：0；
变换原点：左上；
变换：歪斜（-10度）；
}

世界上的一切都在同一片天空下
纸卷

您可以使用

skewY

和

：：在
之后创建第二个项目：


/***VCONTENT***/
#v形容器{
位置：相对位置；
背景：#000；
}
#主页内容横幅{
边缘顶部：50px；
边缘底部：90像素；
位置：相对位置；
文本对齐：居中；
z指数：0；
背景：#000；
}
#主页内容横幅h1{
字体系列：时代新罗马；
颜色：#fff；
字号：80px；
利润率最高：35%；
}
#主页横幅图像{
背景图像：url（'../images/top banner full.png'）；
背景重复：无重复；
位置：相对位置；
左侧填充：0px；
右边填充：0px；
最大宽度：100%；
最大高度：100%；
背景大小：100%；
高度：950px；
最小高度：950px；
边缘底部：150px；
}
#滚动底部{
颜色：#fff；
利润率最高：16%；
字体系列：blueHighway；
}
#滚动底部：悬停{
光标：指针；
颜色：#FFF100；
}
#关于我们的主页{
高度：300px；
位置：相对位置；
宽度：100%；
左侧填充：0px；
右边填充：0px；
背景：#fff；
}
#关于我们的主页：：以前{
内容：''；
宽度：100%；
身高：100%；
位置：绝对位置；
背景：继承；
z指数：0；
底部：0；
变换原点：左上；
变换：歪斜（-10度）；
}
#关于我们的主页：：之后{
内容：''；
宽度：100%；
身高：100%；
位置：绝对位置；
背景：黄色；
z指数：0；
底部：0；
变换原点：左上；
变换：歪斜（-10度）；
}

世界上的一切都在同一片天空下
纸卷