隐藏在底部的CSS HTML Angled Div with Overflow

Question

请看一下图片

我的挑战如下.蓝色是带背景图像的div.角度应为-6度.在这个div中我们有透明的png(这里是2个人).允许人民头部^^°离开div.但不是腿.并且应该对图像进行动画处理,以便它们可以从左向右"行走".

问题是对我来说,我不知道如何将头部归档,可以"离开"盒子,但腿需要隐藏"溢出".

蓝色框的宽度应为100%,因此将-6deg旋转到div并且+ 6deg对人不起作用.

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

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

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

https://jsfiddle.net/rsr04udj/

Answer 1

你可以尝试一些技巧来覆盖腿而不是头部.请检查此演示我已创建仅包含文本的小示例.您可以用您拥有的图像替换文本.

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

演示