底部隐藏有溢出的 CSS HTML Angled Div答案

【问题标题】：CSS HTML Angled Div with Overflow hidden on the bottom底部隐藏有溢出的 CSS HTML Angled Div
【发布时间】：2015-05-05 07:41:13
【问题描述】：

请看图

我的挑战如下。蓝色是带有背景图像的 div。角度应该是-6度。在这个 div 中，我们有透明的 png（这里是 2 个人）。人民头被允许^^°离开div。但不是腿。并且图像应该是动画的，以便他们可以从左到右“行走”。

问题出在我身上，我不知道如何归档带头的零件可以“离开”盒子，但腿需要隐藏“溢出”。

蓝色框的宽度应该是 100%，所以旋转 -6deg 到 div 和 +6deg 到 people 不起作用。

感谢您的帮助。如果不清楚我的问题是什么，请问。英语不是第一语言^^谢谢。

编辑：没有“封面”div。我需要看到一个渐变。蓝色上方和下方的白色区域必须是透明的。

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

https://jsfiddle.net/rsr04udj/

【问题讨论】：

标签： html css css-shapes

【解决方案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

【讨论】：

我在这里看到的问题是'bottom-div'我不能使用这样的东西，因为直接在蓝色div下面是背景渐变。所以如果我使用这个覆盖底部的div，我看不到ist 下面的背景渐变。
就像在这个演示中：jsfiddle.net/0xdscqLo/2 只是白色的战神必须离开。我需要看到那里的渐变。

【解决方案2】：

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

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

Demo

【讨论】：

谢谢。我尝试过这个。但我被困在这里。我设置了一个演示英雄：jsfiddle.net/0xdscqLo 头部应该在红色边框上方。
几乎^^°我在这里添加了一个丑陋的渐变。 jsfiddle.net/0xdscqLo/2 脑后的白色区域必须去。我需要看到那里的渐变......
那你为什么不使用背景图片，让它的顶部部分透明呢？
更新版本在这里。 jsfiddle.net/devsaurin/0xdscqLo/3 但我认为 jbutler483 提供的解决方案如果适合您的需要会更好
在背景图像中带有透明部分的想法是一个很好的想法^^ 在我读到这个之后就这样做了：jsfiddle.net/rsr04udj 你更新的小提琴也是一个很好的想法^^ 谢谢！

【解决方案3】：

您可以结合使用 z-index 和伪元素来实现这种功能，这意味着您可以将它夹在一个倾斜的伪元素后面和另一个前面，而不是“隐藏腿”，从而创建这种“底部隐藏和顶部显示的效果：

JsFiddle Demo

演示片段 （全屏查看 sn-p）

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

【讨论】：

是的，差不多。但问题就在这里，我必须看到背景渐变。我在这里添加了一个丑陋的背景渐变：jsfiddle.net/8atkr5fc/2。前后的番茄都得去。

【解决方案4】：

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

（如果出现不需要的滚动条：在某些情况下，当您希望父级隐藏溢出和带有滚动条的绝对值时，我看到有些人用来在 html 和正文上放置溢出，这在我看来是不好的做法，但它可能会导致更多的问题而不是好处，但这不是你的情况）。

在你的情况下：

   .wrapper{

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

【讨论】：