CSS HTML Angled Div with Overflow hidden on the bottom

问题

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/

回答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

回答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>

回答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

来源：https://stackoverflow.com/questions/28852405/css-html-angled-div-with-overflow-hidden-on-the-bottom

标签

html

css

html5

css3

css-shapes