Question

我需要构建以下屏幕截图，而我无法反复思索如何处理角度：

我尝试使用伪类将对角线边缘添加到纯色div中。但是这种设计需要并排放置两张图像，以便在那里工作。此外，斜面必须通过具有可变高度的不同部分保持相同的角度。我无法使用剪辑路径，因为我需要支持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>

Answer 2

而且，这是另一个例子，您可以开始进行更多调查：CodePen

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%;
}

对角和响应地拆分div

2 个答案: