두 div 간 기울어 진 간격 설정

Question

현재 모바일 웹 사이트의 방문 페이지를 만들려고하고 있는데 이미지가있는 두 개의 기본 div가 필요합니다. (제 예제에서는 색상이 있습니다).

이

<ion-content> 

    <div class="upperblock"></div> 
    <div class="downblock"></div> 

</ion-content> 

내 CSS는 :

.upperblock{ 
    width: 100%; 
    height: 50%; 
    background-color: #2ec95c; 


    } 

    .downblock{ 
    width: 100%; 
    height: 50%; 
    background: #000; 

    } 

내가 그런 걸 (내 결과의 스크린 샷은 "기대어"분리를, 그리고 것 빨간색 선이 나는 곳이 여기 내 HTML입니다 ')로 분리 싶습니다 :

가 사전에 어떤 도움을 주셔서 감사합니다, 이것에 대해 아무것도 찾을 수 없습니다!

Answer 1

.container { 
 
    position: relative; 
 
    overflow: hidden; 
 
    background-color: #2ec95c; 
 
} 
 
.upperblock { 
 
    width: 100%; 
 
    height: 200px; 
 
    background-color: #2ec95c; 
 
    color: #000; 
 
} 
 

 
.downblock { 
 
    width: 100%; 
 
    height: 200px; 
 
    background-color: #000; 
 
    color: #FFF; 
 
} 
 

 
.block { 
 
    transform: skewY(-6deg); 
 
    padding: 50px; 
 
    margin: -5% 0; 
 
} 
 
.block * { 
 
    transform: skewY(6deg); 
 
}

<div class="container"> 
 
    <div class="block upperblock"> 
 
    <h2>content</h2> 
 
    </div> 
 
    <div class="block downblock"> 
 
    <h2>content</h2> 
 
    </div> 
 
</div>

Answer 2

각 div 아래에 다른 div를 추가 할 수 있습니다 (여기서는 :after이 트릭을해야 함). transform: rotate(15deg)으로 바꾸세요. div를 켭니다.

중요 사항 : 회전 된 상자의 내용도 함께 표시됩니다. 따라서 콘텐츠와 배경 div를 분리 할 수 ​​있습니다.

다른 방법은 svg 이미지를 만드는 것입니다.

Answer 3

당신은 upperblock DIV 사용하여 CSS에 블록을 추가하고 transform를 사용하여 해당 회전 수), SVG 완벽하게 확장되고 코드는 방식 청소기 볼 것이다. 당신은 당신의 내용에 따라 높이와 함께 놀 필요가 있지만 이것은 확장되고 반응적일 것입니다.

.outer { 
 
    overflow: hidden; 
 
} 
 
.upperblock{ 
 
    width: 100%; 
 
    min-height: 40vh; 
 
    background-color: #2ec95c; 
 
    position: relative; 
 
} 
 
.upperblock::after { 
 
    content: ""; 
 
    display: block; 
 
    height: 120px; 
 
    background: #2ec95c; 
 
    width: calc(100% + 50px); 
 
    position: absolute; 
 
    bottom: -60px; 
 
    transform: rotate(7deg); 
 
} 
 

 
.downblock{ 
 
    width: 100%; 
 
    min-height: 60vh; 
 
    background: #000; 
 
}

<div class="outer"> 
 
    <div class="upperblock"></div> 
 
    <div class="downblock"></div> 
 
</div>

Answer 4

또한 그

body { 
 
    margin: 0; 
 
    width: 100vw; 
 
    height: 100vh; 
 
} 
 

 
.upperblock { 
 
    width: 100%; 
 
    height: 50%; 
 
    background-color: #2ec95c; 
 
    position: relative; 
 
} 
 

 
.downblock { 
 
    width: 100%; 
 
    height: 50%; 
 
    background: #000; 
 
    position: relative; 
 
} 
 

 
.downblock::before { 
 
    content: ""; 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: inherit; 
 
    position: absolute; 
 
    top: 0; 
 
    transform: skewY(-10deg) translateY(-50%); 
 
}

<div class="upperblock"></div> 
 
<div class="downblock"></div>