Create Incredible Shapes Using the CSS Clip-path Property

While trying to convert a Figma design to code recently, I had to make use of a CSS property called

clip-path

. In this article, I would try to explain what

clip-path

is and when it can be used.

Figma Design

The task was to recreate the orange curved border at the bottom of the section in the image above. A first inclination would be to use a border-bottom-right-radius and border-bottom-left-radius of 50% to try and achieve the rounded edges. This would work, but I noticed that as the height of the section got bigger, the curve became skewed.

What is Clip-path

How do we get a finer curve then? Clip-path to the rescue. According to MDN, The

clip-path

CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden. The

clip-path

property can take different combination of values, including a url or basic-shape.

Clip-path Examples

To explain this, I would use a codepen example. As can be seen below, this is a square of equal width.

This is the same square after adding the

clip-path

property. As seen in the example below, we are passing in a value of circle, a basic-shape to

clip-path

. This defines a circle using a radius and a position. The radius here is 100px and since no position is passed in, the center of the square is the center of the circle.

Ellipse clip-path

Here is an example using a different basic-shape, an ellipse. An ellipse takes in two radii and a position. The first radius is the horizontal radius, while the second radius is the vertical radius. The radius can be in pixels or in percentages.

The position can also be represented in percentages. The first value is the position of the center of the ellipse on the x-axis or the horizontal axis, while the second value is the position of the center of the ellipse on the y-axis or vertical axis.

I have added an additional box with a border to show the position of the ellipse.

Solution to Design

Using the above knowledge about

clip-path

, I was able to get a finer curve using an ellipse.

And for a full width section, the curve was also better than using border-radius.

Conclusion

Bennett Feely, a web developer has a website where you can customize any shape you hope to achieve and get the CSS

clip-path

code generated. You can check it out here.