html - 底部 overflow hidden 的 CSS HTML Angled Div

标签 html css css-shapes

请看图片 The Problem

我的挑战如下。蓝色是带有背景图像的 div。 Angular 应该是-6deg。在这个 div 中,我们有透明的 png(这里是 2 个人)。允许人民头 ^^° 离开 div。但不是腿。图像应该是动画的,这样他们就可以从左到右“行走”。

问题是对我来说,我不知道如何归档头部可以“离开”盒子但腿需要隐藏“溢出”的部分。

蓝色框的宽度应为 100%,因此向 div 旋转 -6 度和向人物旋转 +6 度是行不通的。

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

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

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

https://jsfiddle.net/rsr04udj/

最佳答案

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

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

Demo

关于html - 底部 overflow hidden 的 CSS HTML Angled Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28852405/

相关文章:

javascript - 在控制台中有效,但在内容脚本中无效

html - 撕裂式页脚不起作用

css - 为什么可以清除 float 元素却不能清除绝对定位元素?

javascript - 使用vue js隐藏表格列

css - 折叠效果使用CSS3

HTML 和 CSS 不规则三 Angular 形图片库

html - 切出圆形按钮

html - 如何使用css3创建这种文字效果?

Javascript - 如何在不清除输入的情况下更改标签的 innerText

html - 如何移动特定元素?