Javascript 按对角线方向和相应方向分割div

我需要创建以下屏幕截图，但我不知道如何响应角度：

我尝试使用伪类将对角边添加到纯色div中。 但是这种设计需要两个并排的图像，所以在那里不起作用。此外，通过不同高度的不同截面，斜面必须保持相同的角度。我不能使用剪辑路径，因为我需要支持IE

以下是我无力的尝试：

正如你所看到的，我有麻烦了！这种设计可行吗？你对如何处理这个问题有什么建议吗？它需要javascript吗

更新

我取得了一点进步。这是一支更新过的钢笔：

我无法在最后一个部分获得正确的倾斜，这需要可变的高度和宽度。我尝试使用javascript，但我没有正确的计算：

        $(".slant").css('width', $('.main').width() * 0.5 - 100);
        $(".slant").css('border-top-width', $('.main').height());

我还没有弄明白如何在一行中处理两个图像

---

有人对解决上述问题有什么建议吗？

以下是您可以处理的问题：

Bootply：

.container{位置：相对；宽度：500px；溢出：隐藏；}
.flex{display:flex；overflow:hidden；}
.cinq{溢出：隐藏；宽度：50%；高度：150px；背景：蓝色；}
.cinq+.cinq{oveflow:隐藏；右侧：-25%；宽度：75%；高度：150px；位置：绝对；变换：倾斜（-20度）平移（-50px）；背景：红色；}
.flex+.flex.cinq+.cinq{transform:skewX（20deg）translate（-50px）}
.cinq.img{高度：100%；背景大小：封面；背景图像：url(https://s-media-cache-ak0.pinimg.com/564x/ca/9b/ca/ca9bca4db9afb09158b76641ea09ddb6.jpg)；位置：绝对位置；
宽度：100%；
排名：0；
左：-50px；变换：skewX（20deg）；}
.flex+.flex.cinq+.cinq.img{transform:skewX（-20deg）；}

1.
3.

下面是另一个示例，您可以开始进一步研究：

---

图像是否需要通过CMS进行更改？是否有一个论点，使图像PNG与透明像素的倾斜？不幸的是，是的，所有的图像需要通过CMS编辑。他们甚至可能需要在一个倾斜的分区中使用HTML5背景视频。在我看来，透明PNG对于一般CMS用户来说是最容易管理的。此外，我不确定在没有JS的情况下，当有可变高度时，是否有可能在斜面上实现相同的角度。最后，如果CMS用户添加两个高度不同的并排图像，会发生什么情况？当然，这很复杂。我会在wordpress中设置一个预定义的图像裁剪，以确保图像大小相同。但他们需要自我监控，以确保上传的图像不会太小。这些图片不会经常被编辑。哦，谢谢！这看起来已经非常接近我需要的了。我现在就要开始挖掘了，我会回来报告的。非常感谢你的时间！啊，我刚刚注意到这是使用剪辑路径，这在IE上不起作用。我想知道我是否可以使用剪辑路径多边形填充…谢谢！我现在要玩这个。我很感激！

body {
  background-color: #00bcd4;
}

div { box-sizing:border-box; }

.row {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.image {
  background: url(https://s-media-cache-ak0.pinimg.com/564x/ca/9b/ca/ca9bca4db9afb09158b76641ea09ddb6.jpg) center center no-repeat #eee;
  background-size: cover;
  height: 400px;
  width: 50%; 
  float: right;
}

.image2{
  background: url(https://s-media-cache-ak0.pinimg.com/564x/ca/9b/ca/ca9bca4db9afb09158b76641ea09ddb6.jpg) center center no-repeat #eee;
  background-size: cover;
  height: 400px;
  width: 64.5%; 
  float: left;
  -webkit-clip-path: polygon(0 0, 100% 0, 78% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 78% 100%, 0% 100%);
}

.image3{
  background: url(https://s-media-cache-ak0.pinimg.com/564x/ca/9b/ca/ca9bca4db9afb09158b76641ea09ddb6.jpg) top left no-repeat #eee;
  background-size: cover;
  height: 400px;
  width: 50%;
  float: left;
  -webkit-clip-path: polygon(28% 0, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(28% 0, 100% 0, 100% 100%, 0% 100%);
  position: absolute;
  right: 0;
}

.text {
  background-color: #eee;
  padding: 30px;
  position: relative;
  width: 50%;
  float: left;
  height: 400px;
}

.text > div {
  position: relative;
  z-index: 1;
}

.text2 {
  height: 400px;
  width: 50%; 
  float: left;
  background: #fff;
  padding: 30px
}

.corner:after {
  transition: all .3s ease;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  position: absolute;
  display: block;
  content: "";
  top: 0;
}

.corner-right:after {
  border-left: 150px solid #eee;
  border-top: 400px solid transparent;
  border-right: 270px solid transparent;
}

.corner-left:after {
  border-right: 150px solid #eee;
  border-top: 400px solid transparent;
  border-left: 270px solid transparent;
  right: 50%;
}