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

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.

.main {
  background: url(//picsum.photos/800/800) no-repeat -0 -50px;
  height: 250px;
  width: 350px;
  background-size: cover;
}

.ban {
  height: 150px;
}

.mask {
  width: 50px;
  height: 50px;
  float: left;
  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;
}

.mask .inner {
  height: 100%;
  width: 100%;
  border: 1px solid red;
}

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