Oblique Bild Box mit CSS

Question

Ich brauche eine CSS-Lösung für dieses Problem. Ich hoffe, ihr könnt mir helfen.

Gibt es eine Möglichkeit, diese Lösung mit reinem CSS zu konvertieren? Das Problem ist, dass die Bilder zusammenhalten müssen. Ich habe es mit einem div versucht, das sich dreht, mit Überlauf versteckt und ein Bild darin, das die entgegengesetzte Drehrichtung hat. Hat nicht so gut arbeiten ..

Answer 1

Sie können es mit transform:skew(...); tun. Es "verzerrt" das Container-Element und "entkräuselt" den Inhalts-Wrapper, während er sich für den schrägen Abschnitt überlappt.

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