2017-01-11 7 views
0

Ich möchte ein div unter einem anderen div mit Clip-Pfad anzeigen, aber das Ergebnis ist ein wenig seltsam.Clip-Pfad zur Anzeige eines div unter einem anderen div

DEMO CODEPEN

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

Wenn Sie den Clip-Pfad CSS, die Satzanzeige normalerweise kommentieren.

Aber ich möchte das erreichen. In meinem Bildbeispiel ist das rote Quadrat unten zum grünen Quadrat.

enter image description here

Vielen Dank im Voraus für Ihre Antwort.

Antwort

2

Angenommen, ich verstehe, was Sie wollten, hier ist ein funktionierendes Beispiel. Ich musste deinen Code ein wenig umstrukturieren. Ich habe den Ausschnitt auf dein rotes div angewendet, das mit dem Bild. Dann zog ich die Schnittmaske Prozentsätze verwenden, einschließlich der gesamten Rechteck, nicht nur das Dreieck:

.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