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.
Hello, world - Web dev etc
Hello, world - Web dev etc
Hello, world - Web dev etc
Hello, world - Web dev etc
Hello, world - Web dev etc
Hello, world - Web dev etc
Hello, world - Web dev etc
Hello, world - Web dev etc
Hello, world - Web dev etc
<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%
)
Comments →How to use clip-path in CSS (with examples)