다른 div 아래에 div를 표시하기위한 clip-path

Question

clip-path를 사용하여 다른 div 아래에 div를 표시하고 싶지만 결과는 약간 이상합니다.

clip-path: polygon(0 285px, 30px 300px, 0 315px); 

당신이 클립 경로 CSS, 일반적으로 블록 디스플레이를 언급하는 경우

DEMO CODEPEN

.

그러나 이것을 달성하고 싶습니다. 내 이미지 예제에서 빨간색 사각형은 녹색 사각형 아래에 있습니다.

는 응답에 미리 감사드립니다.

Answer 1

내가 원하는 것을 이해했다고 가정하면, 여기에 실제 예가 있습니다. 나는 당신의 코드를 약간 재구성해야했다. 이미지가있는 빨간색 div에 클리핑을 적용했습니다.

.left { 
    position: relative; 
    z-index: 2; 
    background: green; 
    height: 600px; 
    -webkit-clip-path: polygon(0% 0%, 100% 0, 100% 285px, 110% 300px, 100% 315px, 100% 100%, 0 100%); 
    clip-path: polygon(0% 0%, 100% 0, 100% 285px, 110% 300px, 100% 315px, 100% 100%, 0 100%); 
    padding: 0; 
} 

https://codepen.io/anon/pen/QdNymZ

: 그럼, 전체 사각형을 포함,뿐만 아니라 삼각형을 비율을 사용하여 클리핑 마스크를 그린