Html 如何在PNG图像可见部分覆盖背景图案？

有没有一种方法可以将背景图案添加到

png

images可见部分？我需要添加一个三角形，上面有一个图案，但到目前为止，纯

css

解决方案对我来说还不起作用，所以有办法做到这一点吗

基本上我需要一个尺寸为45px的三角形；高度：23px用图案覆盖

---

就像这里的一个：指向下方，上面有一个图案。

根据@Fabrizio的评论，您可以使用剪辑路径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);
}

这会产生一个向下的三角形，就像这样

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

什么样的？