Mascara em div como colocar?

[By Pedro 0]

Boa tarde

 

Pessoal quem puder me ajudar fico grato...

 

 

Hoje me deparei com um problema que para muito deve ser bem comum.

 

Para quem chutou Internet Explorer... ACERTOU.

 

Basicamente preciso inserir uma mascara em uma div de forma que as imagens dentro de uma lista que esta dentro da div passem a ter o formato da mascara

 

 

Tentativas: SVG, Gambiarra com Position.. a primeira aceitável em todos os Navegadores, exceto no projeto de navegador IEca!

 

O Frame

(cinza é transparência)

 

Resultado Esperado

(cinza é transparência)

 

Encontrei um plugin (Mas não resolveu)

http://almogbaku.github.io/imageMask

Na busca por uma solução encontrei este plugin porem ele não pega em div e além disso redimensiona a imagem proporcionalmente

[Wanderson Valerio 102]

Não entendi (?)

background: transparent;

[Buchechafs 6]

Estrutura:

 

<li style="background:url(imagens/teste.jpg);"> // aqui você vai colocar a imagem
  <div class="mascara"> // div onde vai ficar a mascara
    <a href="#">Link</a>  // o link do objeto
  </div>
</li>

Css

 

.mascara {
  background: url(../imagens/mascara.png) transparent; // a imagem da mascara com fundo transparent;
  height: 114px;  // coloque o tamanho da mascara
  width: 174px;
}

.mascara a {
  display: block;
}

Testa ai...

 

Dando certo ou não dando avisa...

[Wanderson Valerio 102]

Acho que é isso que você quer: http://cdpn.io/dxyiw