javascript - 对 Angular 分割 div 并响应式

Question

我需要构建以下屏幕截图，但我不知道如何响应地执行 Angular :

/image/WbdGZ.jpg

我尝试使用伪类向纯色 div 添加对 Angular 线边缘。 但这种设计需要两个并排的图像，因此在那里不起作用。此外，在不同高度的不同部分，倾斜必须保持相同的 Angular 。我无法使用clip-path，因为我需要支持IE。

这是我微弱的尝试: https://codepen.io/lsterling03/pen/zPEgaq

如您所见，我遇到了麻烦!这样的设计可以吗？您对如何解决这个问题有什么建议吗？需要 JavaScript 吗？

更新

我取得了一点进步。这是更新的笔: https://codepen.io/lsterling03/pen/GOOqmo

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

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

我还没有弄清楚如何连续制作两个图像。

有人有解决上述问题的建议吗？

Answer 1

您可以使用以下内容:

Bootply:https://www.bootply.com/4QuGRXY11d

.container{position:relative;width: 500px; overflow:hidden;}
.flex{display:flex;overflow:hidden;}
.cinq{overflow:hidden;width:50%;height:150px;background:blue;}
.cinq + .cinq{oveflow:hidden;right:-25%;width:75%;height:150px;position:absolute;   transform: skewX(-20deg) translateX(-50px);background:red;}
.flex + .flex .cinq + .cinq{transform: skewX(20deg) translate(-50px)}
.cinq .img{height:100%;background-size:cover; background-image:url(https://s-media-cache-ak0.pinimg.com/564x/ca/9b/ca/ca9bca4db9afb09158b76641ea09ddb6.jpg);    position: absolute;
    width: 100%;
    top: 0;
    left: -50px;transform: skewX(20deg);}

.flex + .flex .cinq + .cinq .img{transform: skewX(-20deg);}

<div class="container">
  <div class="flex">
     <div class="cinq">1</div>
     <div class="cinq">
       <div class="img"></div>
    </div>
  </div>
  <div class="flex">
     <div class="cinq">3</div>
     <div class="cinq"><div class="img"></div></div>
  </div>
</div>