JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.main
    {
        background:url(http://www.linkmesh2.com/scraper/data/alphacoders/Ladybug%20Wallpapers/322578.jpg) 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;
    }