Masking BG image

1 Views

I am trying to create the following in my WordPress images/posts.

enter image description here

Read More

I need it to be responsive as well so I am using Bootstrap 3 and Background images.

Code snippet for 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 just gets featured image from the post and puts it as a background.

I’m looking to get that masked arrow, or at least fake it.

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. Use pseudo-elements and transparent borders to fake it

    In this example, two empty boxes are added to .image using ::before and ::after pseudo-elements.

    The boxes are transparent, so are all of its borders except on one-side. Each is positioned so that they stretch along one half of one side of the container with their edges touching.

    A triangular shape is formed where the corners of the borders meet.

    The .image container has a border of the same style set on all sides except the one where the pseudo-boxes are positioned, which completes the illusion of a clipping mask with an arrow notched into one side.

    A media query is used to change the position of the pseudo-elements and recolor the borders along a different edge.

    Hint: View “Full page” and change your viewport size to see the 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>