While trying to convert a Figma design to code recently, I had to make use of a CSS property called . In this article, I would try to explain what is and when it can be used. clip-path clip-path 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 , The 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 property can take different combination of values, including a or . MDN clip-path clip-path url 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 property.  As seen in the example below, we are passing in a value of circle, a basic-shape to . 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. clip-path clip-path 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 , I was able to get a finer curve using an ellipse. clip-path And for a full width section, the curve was also better than using border-radius. Conclusion , a web developer has a website where you can customize any shape you hope to achieve and get the CSS code generated. You can check it out . Bennett Feely clip-path here

CodePen

ORANGE

The History of Daylight Saving Time

How to Create an Instant Search Input with Debounce in React.js

Read My Stories

Portfolio

Nominated for 2022 - HackerNoon Contributor of the Year - Css

Nominated for 2022 - HackerNoon Contributor of the Year - Api

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Css3

Too Long; Didn't Read

Make resilience your competitive advantage

Create Incredible Shapes Using the CSS Clip-path Property

Create Incredible Shapes Using the CSS Clip-path Property

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

How to Create an Instant Search Input with Debounce in React.js

Create A Lightning Text Effect Using HTML And CSS Using This Simple Code

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

How to Create an Instant Search Input with Debounce in React.js

Create A Lightning Text Effect Using HTML And CSS Using This Simple Code

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps