CSS HTML Angled Div with Overflow hidden on the bottom - html

Question

please take a look at the image
My Challenge ist the following. The Blue is a div with a background image. The angle should be -6deg. In this div we have transparent png (here the 2 people). The Peoples head are allowed ^^° to get out of the div. but not the legs. And the Image should be animated so that they can "walk" from left to right.
The Problem is for me, that i have no Idea how to archiv the part with heads can "leave" the box but the legs need a "overflow" hidden.
The Blue box should be 100% in width, so rotate -6deg to the div and +6deg to the people doesnt work.
Thank you for my help. If it shouldnt be clear what my problem ist, just ask. Englisch is not first language ^^ Thanks.
Edit: No "Cover" divs. There is a gradient i need to see. the white area above and beneath the blue has to be transparent.
EDit2: I think i got it ^^ Look at this Thanks to SD. !
https://jsfiddle.net/rsr04udj/

Answer 1

You can try some tricks to cover legs and not heads.
Please check this demo I have create small example with text only. You can replace text with images you have.
<div class="wraper">
<div class="whitebar">
<div class="people">PEOPLE</div>
</div>
</div>
Demo

Answer 2

You could use a combination of z-index and pseudo elements for this kind of functionality, meaning that rather than 'hiding the legs', you can sandwich it behind one skewed pseudo and in front of another, creating this 'bottom hidden and top shown' effect:
JsFiddle Demo
Demo Snippet (view snippet in full screen)
.people {
background: url(http://fs2.directupload.net/images/150304/f48hrkmk.png) no-repeat;
background-size: 200px 300px;
height: 300px;
width: 200px;
position: absolute;
bottom: 0;
left: 0;
z-index: 7;
transition: all 6s;
}
.wrap:hover .people {
left: 100%;
}
.wrap {
height: 400px;
width: 100%;
position: relative;
background: lightblue;
overflow: hidden;
}
.wrap:before {
height: 50%;
width: 100%;
content: "";
position: absolute;
top: -20%;
z-index: 6;
left: 0;
-webkit-transform: skewY(-6deg);
-moz-transform: skewY(-6deg);
transform: skewY(-6deg);
background: white;
}
.wrap:after {
height: 50%;
width: 100%;
content: "";
position: absolute;
bottom: -20%;
z-index: 8;
left: 0;
-webkit-transform: skewY(-6deg);
-moz-transform: skewY(-6deg);
transform: skewY(-6deg);
background: white;
}
<div class="wrap">
<div class="people"></div>
</div>

Answer 3

<div class='wrapper'>
<div class='blue-container'>
<div class='people></div>
</div> //remove overflow hidden
<div class='bottom-div></div> // use this div to hide the legs
z-index: 100;
</div> // make this overflow : hidden

Answer 4

I see that you don't have in your code on the .wrapper class position relative.
This is a problem when you use some inner child as absolute It sometimes can be the reason to some problems like this or unwanted scrollbar.
In case there's no relative parent then the absolute will be relative to the window.
(In case of unwanted scrollbar: There's cases when you want the parent to have the overflow hidden and the absolute with scrollbar i saw some people use to put overflow on the html and the body which is bad practice in my opinion but it can cause more issues than benefits, but it's not your case here).
in your case:
.wrapper{
...
position:relative;
}
for the children (in your case whitebar):
.whitebar {
...
height:600px;
}