Can CSS be used to mask background images?

Question

This is what I have presently:

Here's my code so far:

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

Here's what I am aiming for:

I am looking to create a mask using CSS - what do I need for this?

Answer 1

If you don't find the solution in the comments above, then I've got one for you.

Instead of trying to create the svg or png image to position against, you could use borders (if you're using a solid color that's easy to work with) to replicate this.

You can see a working jsFiddle here

Edit

The old jsFiddle died out, and in order to recreate, accompanying code is required. Provided below is the 'mask' element that makes this all work.

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