具有固定背景附件的非矩形块

时间:2014-06-18 11:05:01

标签: html css3 svg

问题是:v-typed bottom,here。我需要修剪块的角落,留下固定的背景(背景附件:固定),以便它可以滚动并通过v-bottom可见。此外,角度必须固定在每个相同的块中(svg掩码对我没有帮助,因为它具有可扩展性)。街区的高度不同。

我试图解决这个问题几天......有人可以帮忙吗?...

PS:屏幕截图中的两个块(黄色和黑色)仅与其内容和背景图像不同,因此它们都具有固定背景的具有v型三角形底部。

编辑:需要支持crossbrowser。

2 个答案:

答案 0 :(得分:0)

我试过clip-path: polygon(0 0,100% 0,100% 80%,50% 100%,0 80%); 唯一的问题是你不能从底部说60px。

这是一个Fiddle

答案 1 :(得分:0)

我会用三个div攻击这个问题。最外面有深色/黑色背景。

下一个包含黄色背景。它可以是最外层的孩子。

然后我创建一个V形的透明PNG并将其放在内部(黄色)div的顶部。如果你将div放在内部/黄色div的底部,它看起来就好像它在背景中消失了。