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>