¿Se puede usar CSS para enmascarar imágenes de fondo?

Question

Esto es lo que tengo actualmente:

Aquí está mi código hasta ahora:

<style type="text/css"> 
    .main 
    { 
     background:url(bg.jpg); 
     height:250px; 
     } 
    .ban 
    { 
     background-color:#333; 
     height:150px; 
    } 
    .mask 
    { 
     width:75px; 
     height:75px; 
     float:left; 
     border:#fff solid 1px; 

     margin:20px; 
    } 
</style> 

<div class="main"> 
    <div class="ban"> 
     <div class="mask"></div> 
     <div class="mask"></div> 
     <div class="mask"></div> 
     <div class="mask"></div> 
     <div class="mask"></div>  
    </div> 
</div> 

Aquí es lo que yo estoy con el objetivo de:

Busco para crear una máscara usando CSS, ¿qué necesito para esto?

Answer 1

Si no encuentra la solución en los comentarios anteriores, entonces tengo una para usted.

En lugar de intentar crear la imagen svg o png para posicionarla, puede usar bordes (si está usando un color sólido con el que es fácil trabajar) para replicar esto.

You can see a working jsFiddle here

Editar

El viejo jsFiddle se extinguieron, y con el fin de recrear, se requiere código de acompañamiento. A continuación se incluye el elemento 'máscara' que hace que todo funcione.

.mask 
{ 
    width:50px; //non-essential 
    height:50px; //non-essential 
    float:left; //non-essential 
    background:transparent; 
    border:1px solid #333; 
    border-top:20px solid #333; 
    border-left:10px solid #333; 
    border-right:10px solid #333; 
    border-bottom:50px solid #333; 
} 

Answer 2

Una solución que utiliza marcas similares a la suya:

http://jsfiddle.net/VtCvx/

<div class="main"> 

     <div class="mask"></div> 
     <div class="mask"></div> 
     <div class="mask"></div> 
     <div class="mask"></div> 
     <div class="mask"></div>  
     <div class="ban"></div> 
</div>​ 

.main 
{ 
    background:url(http://lorempixel.com/800/800/); 
    height:250px; 
    } 
.ban 
{ 
    height:150px; 
    position: absolute; 
    right: 0; 
    left: 550px; 
    background: #333; 
} 


.mask 
{ 
    width:75px; 
    height:75px; 
    float:left; 
    border: #333 solid 25px; 
    border-right-width: 10px; 
    border-bottom-width: 50px; 
    box-shadow: inset 0 0 1px 1px #fff;  
}​