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%);