July 2020: This post is archived - since I moved to Gridsome some of the formatting is messed up. This is on my todo list to update.

CSS Clip path is quite a useful feature of CSS. Here is one way to use the clip path rule, on the background image of an element.

Here is an example. It isn't a great looking one (you can do much nicer things with it) but the example is simple.

The background image is a square image. It is not a <img> tag - it is a CSS tag. The pink is from the div that is behind the div with the background-image set. I've included some text to show you how it works.

<div id='outer_clippath'>
    <div id='clippath_1'>
        Hello, world - <a href='https://webdevetc.com/'>Web dev etc</a> (repeated...)
    </div>
</div>

#outer_clippath {
/* this is not needed, but just to show where the inner div was clipped */
background: pink;
width: 80%;
margin: 0 auto;
max-width: 100%;
}
#clippath_1 {
background-image: url('images/background.jpg');
width: 100%;
height: 200px;
background-size: cover;
color: white;
/* the next line is the important part */
clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%);
}

How to do it

#clippath_1 {
clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%);
}

It is quite easy to generate a clip path. There are a few ways to do it, but the easiest is to use a polygon() with various coordinates. You can use absolute values (such as 40px) or relative (such as 100%)