How to hide overflowed element but only on the top? - html

Question

I only want to hide elements thats overflowing on the top. In my document blue is the background img and the child is skewed 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

Need to add another parent with overflow: hidden:
.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>
Does this work out for you? See the preview below...
Preview

Answer 2

You would need to add another div outside of the parent that would help with hiding the overflow.
.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

You don't need to add another ancestor if you use this trick:
Add overflow: hidden to hide overflow
Increase the height to avoid clipping the overflow at the bottom
Add a negative margin to prevent the previous step from affecting following contents
Use a background image instead of a background color. For example, use a gradient.
Use background-size to set the size of that background image. Do not repeat the background.
.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