带CSS的倾斜图像框

Question

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

有没有办法将这个解决方案与纯CSS转换？问题是，图片必须粘在一起..我试图用一个旋转的div，溢出隐藏和其中的图像，具有相反的旋转方向。没有工作那么好..

Answer 1

你可以用transform:skew(...);做到这一点。它使容器元素“倾斜”，并且在偏斜部分重叠的同时“纠正”内容包装。

* { 
 
    -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; 
 
}

<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>