Javascript 旋转div而不旋转内部部分

我想用css创建这个图像样式。我已经创建了部分，但我面临着旋转它的困难。我希望绿色部分笔直，但当我旋转主包装时，所有的东西都是旋转的。但这是错误的

参考请查看图片

任何形式的帮助都将不胜感激。不确定我是否解释过我的问题是个好办法。 提前谢谢

.banner bg{
位置：绝对位置；
底部：0；
左：0；
宽度：100%；
身高：50%；
显示器：flex；
显示：-webkit flex；
显示：-moz flex；
显示：-o-flex；
变换：旋转（-15度）；
}
.横幅背景。横幅背景秒{
宽度：33.3333%；
位置：相对位置；
}
.bg绿色{
背景#528E72；
}
.bg蓝色{
背景#4C6CC1；
}
.bg-blue2{
背景#4475D4；
}
.bg红色{
背景：CB431B；
}
.bg-red2{
背景#F54F1D；
}
.bg内部{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
填充：15px；
文本对齐：居中；
盒影：0px4px1px-2pxRGBA（0,0,0,0.2）；
}
.bg文本{
字号：28px；
颜色：rgba（255255,0.6）；
}
.bg图标{
列表样式：无；
显示：内联块；
保证金：0；
填充：0；
}
.bg图标li{
显示：内联块；
垂直对齐：中间对齐；
}
.bg图标li a{
文字装饰：无；
显示：块；
字体大小：22px；
颜色：#fff；
右边填充：20px；
}

高中

嗯，很有趣。。也许可以看看变换：歪斜而不是旋转。。。虽然你必须“不倾斜”文本或找到其他方式来放置它

.banner bg{
位置：绝对位置；
底部：0；
左：0；
宽度：100%；
身高：50%；
显示器：flex；
显示：-webkit flex；
显示：-moz flex；
显示：-o-flex；
变换：歪斜（-15度）；
}
斯潘，ul{
变换：倾斜（15度）旋转（-15度）；
}
.横幅背景。横幅背景秒{
宽度：33.3333%；
位置：相对位置；
}
.bg绿色{
背景#528E72；
}
.bg蓝色{
背景#4C6CC1；
}
.bg-blue2{
背景#4475D4；
}
.bg红色{
背景：CB431B；
}
.bg-red2{
背景#F54F1D；
}
.bg内部{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
填充：15px；
文本对齐：居中；
盒影：0px4px1px-2pxRGBA（0,0,0,0.2）；
}
.bg文本{
字号：28px；
颜色：rgba（255255,0.6）；
}
.bg图标{
列表样式：无；
显示：内联块；
保证金：0；
填充：0；
}
.bg图标li{
显示：内联块；
垂直对齐：中间对齐；
}
.bg图标li a{
文字装饰：无；
显示：块；
字体大小：22px；
颜色：#fff；
右边填充：20px；
}

高中

您可以只旋转列的标题，并使用

剪辑路径

裁剪主容器，将蓝色容器推到底部一点，使标题覆盖整个宽度，将其加宽一点，并对其父容器使用

溢出-x:hidden

，请参见此小提琴中的结果：

#标题{
背景：url（'https://kilianvalkhof.com/wp-content/themes/kvsixteen/static/img/bg2.jpg');
宽度：100%；
高度：230像素；
位置：绝对位置；
}
.横幅背景{
位置：绝对位置；
顶部：100px；
宽度：100%；
高度：160px；
显示器：flex；
显示：-webkit flex；
显示：-moz flex；
显示：-o-flex；
剪辑路径：多边形（0%38%，100%0%，100%100%，0%100%）；
}
.横幅背景。横幅背景秒{
宽度：33.3333%；
位置：相对位置；
溢出x：隐藏；
}
.bg绿色{
背景#528E72；
}
.bg蓝色{
背景#4C6CC1；
顶部：38px；
}
.bg-blue2{
背景#4475D4；
}
.bg红色{
背景：CB431B；
}
.bg-red2{
背景#F54F1D；
}
.bg内部{
位置：绝对位置；
排名：0；
左：-10px；
宽度：100%；
填充：15px；
文本对齐：居中；
盒影：0px4px1px-2pxRGBA（0,0,0,0.2）；
变换：旋转（-6度）
}
.bg文本{
字号：28px；
颜色：rgba（255，255，255，0.6）；
}
.bg图标{
列表样式：无；
显示：内联块；
保证金：0；
填充：0；
}
.bg图标li{
显示：内联块；
垂直对齐：中间对齐；
}
.bg图标li a{
文字装饰：无；
显示：块；
字体大小：22px；
颜色：#fff；
右边填充：20px；
}

高中

要纠正文本，只需反转倾斜，然后在单个变换中旋转。。。例如

span{transform:skewY（15度）rotate（-15度）；}

更正了文本。需要为span和ul.Nice添加一些类，但是当调整窗口宽度时，您会看到文本和框的顶部不平行。。。此外，这在IE11中也不起作用（我仍然使用它进行测试）。。这只是一个示例，您可以使用这些值使其完全并行，我不需要IE来测试这一点，因此是的，但我的意思是盒子顶部的角度与文本不同步。。。调整输出窗口的大小以了解我的意思。。。这能解决吗？至于IE11。。我不怪你；）