How to Use Clip-Path CSS Property

I was given a task to replicate website and I thought that would be a walk in the park until I started working on the project. My focus will be on the red/orange background of the header used on that website, as shown on the image above and how I was able to come up with the design using the clip-path property in CSS3.

The Project Folder.

Of course, it wouldn’t make sense talking about the property and not showing it in actual use. So we begin by creating a small project.

We start off by creating our index.html file and link our style-sheet as shown below. We are going to be having only one semantic element, the header, with a class called header.

The CSS

We start by doing the basic CSS browser reset and give the body a padding of 20 pixels in order to avoid the header from covering the full width and height. For the header class, we will add simple styling like the background color and a height.

The Clip-Path Property

This is how our property will look like in our CSS.

clip-path: polygon(x% y%, x2% y2%, x3% y3%, x4% y4%)

Now in our instance, the x and y literally depict the x and y-axis. The clip-path property starts clipping from the top left section then the top-right, bottom-right, and finally the bottom-left section. More of in a clockwise direction as shown below.

So the clip-path property for the above image is as follows:

clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);

That is we start on the x axis, that is 0 for both. We then move 100% on the x axis to the top-right but 0 movements on the y axis. Then we make a 100% movement on both axis down to the bottom-right side. We finish off by moving back to the zero mark on the x axis but remember we had made 100% movement on the y axis to the bottom-left side(4). Hence that result.

The End Result

clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 95% 100%, 94% 88%, 0% 88%);

clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 95% 100%, 94% 88%, 0% 88%);

So the points that we have changed are points number 4, 5, and 6 as shown in the image above.

So point 1 is x = 0 y = 0, 
point 2  x = 100 y = 0, 
point 3  x =100 y = 100, 
point 4 x = 95% y = 100%, 
point 5 x = 94% y = 88%,
point 6 x = 0 y = 88

It’s quite overwhelming at first but with practice, it all starts to make sense. You can check out the final code on my y.