paint-brush
Create Incredible Shapes Using the CSS Clip-path Propertyby@andemosa
4,980 reads
4,980 reads

Create Incredible Shapes Using the CSS Clip-path Property

by Anderson OsayerieFebruary 27th, 2022
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

The clip-path CSS property creates a clipping region that sets what part of an element should be shown. It can take different combination of values, including a URL or basic-shape. Clip-path defines a circle using a radius and a position. An ellipse takes in two radii, the first radius is the horizontal radius, the second is the vertical radius. The radius can be in pixels or in percentages, and the position can also be represented in percentages.

Companies Mentioned

Mention Thumbnail
Mention Thumbnail
featured image - Create Incredible Shapes Using the CSS Clip-path Property
Anderson Osayerie HackerNoon profile picture

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.