Czy CSS może służyć do zamaskowania obrazów tła?

Question

To co mam obecnie:

Oto mój kod do tej pory:

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

Oto co ja zmierzające do:

szukam stworzyć maskę za pomocą CSS - czego potrzebuję?

Answer 1

Jeśli nie znajdziesz rozwiązania w komentarzach powyżej, to mam dla ciebie jeden.

Zamiast próbować utworzyć obraz svg lub png w stosunku do pozycji, można użyć obramowań (jeśli używasz jednolitego koloru, z którym łatwo pracować), aby powielić to.

You can see a working jsFiddle here

Edit

Stary jsFiddle wymarli, a także w celu odtworzenia, towarzyszący wymagany jest kod. Poniżej znajduje się element "maska", który sprawia, że ​​wszystko działa.

.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

Rozwiązanie, które wykorzystuje znaczników podobny do własnych:

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