带有CSS的倾斜图像框

Question

我需要一个针对此问题的CSS解决方案。我希望你们能帮助我。

有没有办法用纯CSS转换此解决方案？问题是，图片必须粘在一起..我尝试了一个旋转的div，溢出隐藏，里面有一个图像，旋转方向相反。没那么好......

Answer 1

您可以使用transform:skew(...);执行此操作。它＆＃34;倾斜＆＃34;容器元素和＆＃34; unkews＆＃34;内容包装器在偏斜部分重叠时。

＆＃13;

＆＃13;

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  margin:0;
  color: white;
}
.header {
  background: url(https://hd.unsplash.com/photo-1465420961937-e0eba4dda519);
  height:300px;
  width:100%;
  padding: 0 5%;
  background-size:cover;
  position:relative;
  z-index:-1;
}
.content .wrapper {
  display:block;
  float:left;
  margin:50px auto 200px;
  width:100%;
  padding:0 5%;
  transform:skew(0deg,-5deg);
  -ms-transform:skew(0deg,-5deg);
  -webkit-transform:skew(0deg,-5deg); 
}
.content {
  z-index:1;
  display:block;
  float:left;
  margin-top:-100px;
  width:100%;
  background: url(https://hd.unsplash.com/photo-1462121457351-9fb0f5622b72);
  transform:skew(0deg,5deg);
  -ms-transform:skew(0deg,5deg); /* IE 9 */
  -webkit-transform:skew(0deg,5deg); /* Safari and Chrome */
}
.footer .wrapper {
  display:block;
  float:left;
  margin:50px auto 200px;
  width:100%;
  padding:0 5%;
  transform:skew(0deg,5deg);
  -ms-transform:skew(0deg,5deg);
  -webkit-transform:skew(0deg,5deg); 
}
.footer {
  z-index:1;
  display:block;
  float:left;
  margin-top:-100px;
  width:100%;
  background: url(https://hd.unsplash.com/photo-1467173572719-f14b9fb86e5f);
  transform:skew(0deg,-5deg);
  -ms-transform:skew(0deg,-5deg); /* IE 9 */
  -webkit-transform:skew(0deg,-5deg); /* Safari and Chrome */
}
.endpage {
  z-index: 1;
  position: relative;
  display: block;
  float: left;
  margin-top: -50px;
  width: 100%;
  background: white;
  height: 100px;
}

＆＃13;

<div class="header">
  <!-- first element content -->
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div class="content">
  <div class="wrapper">
    <!-- second element content -->
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>
<div class="footer">
  <div class="wrapper">
    <!-- third element content -->
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>
<div class="endpage">&npsp;</div>

＆＃13;

＆＃13;

＆＃13;