Как можно наложить фоновый рисунок на видимую часть изображения PNG?

Question

Есть ли способ, которым я мог бы добавить фоновый рисунок к изображению png? Мне нужно добавить треугольник с рисунком поверх него, но до сих пор чистые решения css для этого не сработали для меня, так есть ли способ сделать это?

В принципе, мне нужен треугольник с размерами width: 45px; height: 23px; с наложением рисунка.

Как и здесь: http://apps.eky.hk/css-triangle-generator/ указывая вниз и узор поверх него.

Answer 1

В соответствии с замечанием @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); 
} 

Это производит вниз треугольник, указывающий, как так ...

, но вам нужно настроить проценты для достижения точной формы треугольника, в которой вы нуждаетесь.