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