如何制作DIV剪纸?

时间:2016-07-29 02:18:12

标签: html css

我在fandago.com注意到,同时购买门票,底部有一个div。我无法通过检查元素找到它是如何完成的,所以我来到这里。 http://www.tiikoni.com/tis/view/?id=e7bc365

有人可以写一些示例代码来告诉我如何做到这一点,并指出究竟是什么使得剪切?另外,有没有办法让它适应任何背景,所以每次更改页面背景时我都不必更改剪切颜色?谢谢!

1 个答案:

答案 0 :(得分:-1)

我会给你一些想法。

如果你真的想剪掉一些元素,可以在元素上使用clip-path。然后,您可以定义应该是透明或不透明的部分。那么你不必每次都改变background-color,因为它真的很透明。

但你也可以使用像圆圈这样的额外元素(在你的情况下)伪造它,但这很大程度上取决于用例。在这个解决方案中,你每次都必须更改background-color。对于这个我创造了一个小提琴:

https://jsfiddle.net/4m7kra9v/