È possibile utilizzare i CSS per mascherare le immagini di sfondo?

Question

Questo è quello che ho attualmente:

Ecco il mio codice finora:

<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> 

Ecco cosa sto puntando:

Cerco creare una maschera usando CSS - cosa mi serve per questo?

Answer 1

Se non trovi la soluzione nei commenti sopra, ne ho uno per te.

Invece di provare a creare l'immagine svg o png in posizione contraria, è possibile utilizzare i bordi (se si utilizza un colore solido con cui è facile lavorare) per replicare questo.

You can see a working jsFiddle here

Modifica

Il vecchio jsFiddle estinse, e al fine di ricreare, accompagnando è richiesto il codice. Di seguito è riportato l'elemento 'maschera' che rende tutto questo funzionante.

.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 soluzione che utilizza markup simile al tuo:

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;  
}​