Slanted Background with CSS clip-path property

Background Slant Example

The CSS clip-path property allows one to clip an element to show only the parts that you want visible. The clip-path property can be used on many values, but for this demonstration we’re going to focus on the polygon shape since the background will be rectangular in shape.

The polygon clip-path relies on a set of vertices. Below are the intersecting points of a rectangle.

Rectangle Vertices

The coordinates start at (0,0) (top left corner) and you move clockwise over the other vertices. The clip-path to fill an entire rectangle would be:

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

Rectangle Background

The clip-path to create a bottom slant starting at the bottom left corner slanting downwards to the right corner would be:

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

Bottom Left Downwards Slant

Depending on how slanted you want your angle, the percentage value can be increased or decreased as much as you’d like. For a steeper bottom slant you would decrease the percentage.

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

Steeper Bottom Left Downwards Slant

The clip-path to create a bottom slant starting at the bottom right corner slanting downwards to the left corner would be:

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

Bottom Right Downwards Slant

The clip-path to create a top slant starting at the top left corner slanting upwards to the right corner would be: