如何在PNG图像可见部分上叠加背景图案？

Question

有没有办法可以为png图像可见部分添加背景图案？我需要在它上面添加一个带有图案的三角形，但到目前为止纯粹的css解决方案对我来说没有用，所以有没有办法做到这一点？

基本上我需要一个尺寸为width: 45px; height: 23px;的三角形覆盖一个模式。

就像这里的那个：http://apps.eky.hk/css-triangle-generator/指向下方，图案位于其上方。

Answer 1

根据@Fabrizio的评论，您可以使用 clip-path CSS属性，如下所示：

.triangle {
    width: 100px;
    height: 100px;
    background: red url(URL-TO-OVERLAY-PATTERN) scroll no-repeat 0 0;
    -webkit-clip-path: polygon(47% 100%, 0 0, 100% 0);
    clip-path: polygon(47% 100%, 0 0, 100% 0);
}

这会产生一个向下指向的三角形，如此......

但您需要调整百分比以获得所需的精确三角形。