php - Masking BG image -

i trying create following in wordpress images/posts.

i need responsive using bootstrap 3 , background images.

code snippet posts:

<div class="row">        <div class="col-md-4">         <h1>title</h1>         <p>content goes here</p>     </div>               <div class="col-md-8" style="background-image:url('<?php echo $thumbnail_url ?>');">     </div>                </div> 

the background-image:url gets featured image post , puts background.

i'm looking masked arrow, or @ least fake it.

use pseudo-elements , transparent borders fake it

in example, 2 empty boxes added .image using ::before , ::after pseudo-elements.

the boxes transparent, of borders except on one-side. each positioned stretch along 1 half of 1 side of container edges touching.

a triangular shape formed corners of borders meet.

the .image container has border of same style set on sides except 1 pseudo-boxes positioned, completes illusion of clipping mask arrow notched 1 side.

a media query used change position of pseudo-elements , recolor borders along different edge.

hint: view "full page" , change viewport size see media query in action.

.image {      width: 150px;      height: 150px;      margin: 10px;      background-image: url('http://placehold.it/150/009afd/ffffff/&text=aw%2c%20yeah.');  }    .clipping-arrow {      position: relative;      overflow: visible;      border: 10px solid white;      border-color: white white transparent white;  }    .clipping-arrow::before,  .clipping-arrow::after {      content: '';      display: block;      position: absolute;      bottom: -10px;      border: 10px solid white;      border-color: transparent transparent white transparent;  }    .clipping-arrow::before {      right: 50%;      left: -10px;  }    .clipping-arrow::after {      right: -10px;      left: 50%;  }    @media (min-width: 400px) {      .clipping-arrow {          border-color: white transparent white white;      }        .clipping-arrow::before,      .clipping-arrow::after {          right: -10px;          left: auto;          border-color: transparent white transparent transparent;      }        .clipping-arrow::before {          top: -10px;          bottom: 50%;      }        .clipping-arrow::after {          top: 50%;          bottom: -10px;      }  }

<div class="clipping-arrow image"></div>