带CSS的倾斜图像框

Question

I need a CSS solution for this problem. I hope you guys can help me out.

Is there a way to convert this solution with pure CSS? The problem is, the pictures has to stick together.. I tried it with a div that rotates, with overflow hidden and an image inside it, that has the opposite rotate direction. Didn't work that well..

Answer 1

You can do it with transform:skew(...); . It "skews" the container element und "unskews" the content wrapper while overlapping for the skewed section.

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