Wie übergelaufenes Element zu verstecken, aber nur auf der Oberseite?

Question

Ich möchte nur Elemente ausblenden, die oben überläuft. In meinem Dokument blau ist der Hintergrund img und das Kind ist verzerrt div.
fiddle

<div class="parent"> 
    <div class=child> 

    </div> 
</div> 

.parent { 
    margin: 50px; 
    height: 200px; 
    width: 200px; 
    background: red; 
} 
.child { 
    height: 200px; 
    width: 200px; 
    background: blue; 
     transform: skewY(20deg); 
    -webkit-transform: skewY(20deg); 
    -moz-transform: skewY(20deg); 
    -o-transform: skewY(20deg); 
} 

Answer 1

Notwendigkeit, eine andere Elternteil mit overflow: hidden hinzuzufügen: Sie

.ovh-parent { 
 
    overflow: hidden; 
 
} 
 
.parent { 
 
    margin: 50px; 
 
    height: 200px; 
 
    width: 200px; 
 
    background: red; 
 
    margin-top: 0; 
 
} 
 
.child { 
 
    height: 200px; 
 
    width: 200px; 
 
    background: blue; 
 
    transform: skewY(20deg); 
 
    -webkit-transform: skewY(20deg); 
 
    -moz-transform: skewY(20deg); 
 
    -o-transform: skewY(20deg); 
 
}

<div class="ovh-parent"> 
 
    <div class="parent"> 
 
    <div class=child> 
 

 
    </div> 
 
    </div> 
 
</div>

Ist diese Arbeit aus? Sehen Sie sich die Vorschau unten ...

Vorschau

Answer 2

Sie benötigen würden ein weiteren div außerhalb der Mutter hinzuzufügen, die mit Ausblenden des Überlaufes helfen würden.

.overflow{ 
 
    margin: 20px; 
 
    overflow: hidden; 
 
    height: 300px; 
 
    width: 200px; 
 
    position: relative; 
 
} 
 
.parent { 
 
    height: 200px; 
 
    width: 200px; 
 
    background: red; 
 
    position: absolute; 
 
    top: 0; 
 
} 
 
.child { 
 
    height: 200px; 
 
    width: 200px; 
 
    background: blue; 
 
    transform: skewY(20deg); 
 
    -webkit-transform: skewY(20deg); 
 
    -moz-transform: skewY(20deg); 
 
    -o-transform: skewY(20deg); 
 
}

<div class="overflow"> 
 
    <div class="parent"> 
 
    <div class=child> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

Sie brauchen nicht einen anderen Vorfahren hinzufügen, wenn Sie diesen Trick verwenden:

• overflow: hidden hinzufügen Überlauf zu verstecken
• die Höhe Erhöhen Sie den Überlauf zu vermeiden Clipping unten
• Fügen Sie einen negativen Rand hinzu, um den vorherigen Schritt von affecti zu verhindern ng folgenden Inhalt
• Verwenden Sie ein Hintergrundbild anstelle einer Hintergrundfarbe. Verwenden Sie beispielsweise einen Farbverlauf.
• Verwenden Sie background-size, um die Größe dieses Hintergrundbilds festzulegen. Wiederhole den Hintergrund nicht.

.parent { 
 
    overflow: hidden; 
 
    margin: 50px; 
 
    height: 300px; 
 
    margin-bottom: -100px; 
 
    width: 200px; 
 
    background: linear-gradient(red, red) no-repeat; 
 
    background-size: auto 200px; 
 
    margin-top: 0; 
 
} 
 
.child { 
 
    height: 200px; 
 
    width: 200px; 
 
    background: blue; 
 
    transform: skewY(20deg); 
 
    -webkit-transform: skewY(20deg); 
 
    -moz-transform: skewY(20deg); 
 
    -o-transform: skewY(20deg); 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
</div> 
 
Lorem ipsum