CSS가있는 사선 이미지 상자

Question

이 문제에 대한 CSS 솔루션이 필요합니다. 너희들이 나를 도울 수 있기를.

순수한 CSS로이 솔루션을 변환 할 수있는 방법이 있습니까? 문제는 픽처들이 함께 붙어 있어야한다는 것입니다. 오버 플로우가 숨겨져 있고 내부에 이미지가 있고 반대 방향으로 회전하는 div로 회전을 시도했습니다. .. 그 잘

Answer 1

을 작동하지 않았다 당신은 transform:skew(...); 함께 할 수 있습니다. 컨테이너 요소를 "비뚤어지게"하고 비틀린 부분에 대해 겹치면서 내용 래퍼를 "unskews"합니다.

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