CSS HTML 成角度 Div，溢出隐藏在底部

Question

请看图片

我的挑战如下。蓝色是带有背景图像的 div。角度应该是-6deg。在这个 div 中，我们有透明的 png（这里是 2 个人）。允许人民头^^°离开div。但不是腿。图像应该是动画的，这样它们就可以 "walk" 从左到右。

问题出在我身上，我不知道如何归档头部部分可以 "leave" 盒子，但腿部需要 "overflow" 隐藏。

蓝色框的宽度应为 100%，因此向 div 旋转 -6 度和向人物旋转 +6 度不起作用。

谢谢你的帮助。如果不清楚我的问题是什么，那就问吧。英语不是第一语言^^ 谢谢。

编辑：没有 "Cover" divs。我需要看到一个渐变。蓝色上方和下方的白色区域必须是透明的。

EDit2: I think i got it ^^ Look at this Thanks to SD. !

https://jsfiddle.net/rsr04udj/

Answer 1

<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 2

你可以尝试一些技巧来遮住腿而不是头部。请查看此演示，我创建了仅包含文本的小示例。您可以用您拥有的图像替换文本。

<div class="wraper">
    <div class="whitebar">
        <div class="people">PEOPLE</div>
    </div>
</div>

Demo

Answer 3

您可以结合使用 z-index 和伪元素来实现这种功能，这意味着您可以将它夹在一个倾斜的伪元素后面和另一个伪元素前面，而不是 'hiding the legs'，从而创建此 'bottom hidden and top shown'效果：

JsFiddle Demo

演示代码段 （全屏查看代码段）

.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 4

我看到您的代码中没有 .wrapper class 相对位置。当您将某些内部 child 用作绝对值时，这是一个问题。有时这可能是导致此类问题或不需要的滚动条的原因。如果没有相对 parent 则绝对相对于 window.

（在不想要的滚动条的情况下：有些情况下你希望 parent 隐藏溢出，我看到有些人用带有滚动条的绝对值来放置溢出 html 和body 在我看来这是不好的做法，但它可能导致的问题多于好处，但这里不是你的情况。

你的情况：

   .wrapper{

    ...
    position:relative;
    }
for the children (in your case whitebar):
.whitebar {
    ...
        height:600px;
    }

CSS HTML 成角度 Div，溢出隐藏在底部

CSS HTML Angled Div with Overflow hidden on the bottom

html

css

css-shapes