javascript - 在 div 上制作三角形

Question

有人可以告诉我如何在背景图像上向我的用户展示一个三角形。我想做一个三角形的用户界面。为此，我屏蔽了两个图像（一个 background.jpg 和一个屏蔽图像，triangle.png）。我在我的 div 的背景中使用这个新图像。我已经使用MaskImage完成了这项工作。

但问题是我的背景图像的大小发生了变化，但 triangle.png 的大小是固定的。我也尝试过使用线性渐变、css 属性。但它在 IE 中不起作用。那么是否有任何插件可以屏蔽两个图像，而不管它们的大小。或任何其他最佳方式来实现我的目标。

提前致谢 ：）

Answer 1

您应该能够在 CSS 中使用:before和覆盖两个遮罩三角形，并使用http://css-tricks.com/snippets/css/css-triangle/:after等不均匀的边框属性创建三角形。

编辑： http: //jsfiddle.net/A9Zbj/11/（耶！）