Learn about clip-path in CSS

1. Introduction

The clip-path creates a clipping area where content within it is displayed and content outside of it is hidden.

Here is a basic clip-path: circle .

With the use of clip-path , the visible area is only a blue circle ( #77cce9 ).

Any part outside the circle is invisible.

Here is an animation showing a cutout of the circle in the previous example.

2. The Coordinate System

Before going into the details of the clip-path , it is worth mentioning how the coordinate system works.

The origin point is the top left quadrant with the x-axis pointing to the right and the y-axis pointing down.

With that in mind, let’s take a simple example to see how an element uses clip-path .

In the example below, the clipped area is a circle 100px and its center is positioned 0,0 (top left).

Note that the user can only see the highlighted area (dark blue).

The rest of the circle is cliped.

The question is, how can we display the entire circle?

That is, we need to change the points of the x-axis and the y-axis.

The center of the circle is placed 100px from the left and 100px from the top.

Now that you understand how coordinate systems work, I’ll explain the possible values ​​for the clip-path .

3. The Clip-Path Values

3.1 Inset

The inset value identifies an inset rectangle.

We can control the four edges, just like we do with margin or padding .

In the following example, the .card is 20px in length from all sides (top, right, bottom, and left).

If you need to adjust the insertion from one of the edges, you can. Here’s another example:

The eleent has a 50px inset from the bottom.

.card new .card has a 50px inset from below.

Another question is, can we make corners rounded like normal blocks?

Of course it’s possible thanks to the round property.

Add round <border-radius> that can round corners.

Not only that, we can adjust the radius for each side separately.

Below is an example with a 0 radius for the top right and bottom left corners.

3.2 Circle

To use the circle() value, we need its radius and position. Here is an example:

The radius of the circle is 80px and it is positioned 50% on the x axis and 50% 1 on the y axis.

3.3 Ellipse

With ellipse() , we can set the width and height to make an oval clipping.

3.4 Polygon

The polygon() value is the most interesting.

We have the ability to control various sets of x-axis and y-axis tuples.

Here is an example that uses polygon() to cut a rectangle.

Notice how we map each set of points to its coordinates on the axes.

We can also draw complex shapes with multiple points using polygon values.

3.5 Path

The value path() allows us to use an SVG path to crop a specific area.

Currently, the support for different browsers is limited.

We need to use inline SVG, then use url() as the value for clip-path .

In CSS, we need to add the path with the url() value.

Now that we’ve covered clip-path theory and its general values, it’s time to put it into practice.

(go)

4. Use Cases

4.1 Angled Effect

In modern web pages, you may have seen many patterns similar to the one below, on the web there will be some sections with a slightly angled background and an uneven side length.

It’s a perfect case for clip-path

We will use polygon() .

In some cases, adjusting 8 numbers to polygonal value can be annoying.

For that reason, we have a trick that depends on the browser to create the shape we want.

First, we need to add the following:

Then we need to test that part of DevTools .

Once done, notice that there is a small polygonal icon on the left side of the polygon() value.

After clicking on that icon, we can edit polygons in browser.

Isn’t that great? The gif below will be an example for you.

4.2 Making The Angle Relative To The Viewport Width

We can also use CSS calc() in conjunction with the CSS viewport unit to make the angle relative to the width of the viewport .

• References:

https://kilianvalkhof.com/2017/design/sloped-edges-with-consistent-angle-in-css/

4.3 Multiple Angled Effects

I have a question in mind about do we need multiple elements with multiple angles?

The first thing I think of is just adding a box-shadow layer or border .

Unfortunately, they will also be within the effect of the clip-path , so even if we add a box-shadow or border , it won’t appear as expected.

In such a case, the solution is to use multiple elements, with each element having a different cutoff point. Here’s how we can do it.

We have a dummy element of the same size and clip path as the other.

The difference is that it is located below it with bottom: -20% and z-index: -1 .

I used a value of 20% because it was a result of 100 - 80 .

4.4 Reveal On Scroll

By using the IntersectionObserver API, we can render certain elements on the page while the user is scrolling.

The clip-path value that I find useful for this effect is inset .

Note that the blue rectangle can be completely invisible by applying the inset(50%) .

The value of making it invisible is 50% since we are applying content from four sides.

In other words, the rectangle is applied from edge to center of the rectangle.

In the image below, the inset is being used to display the image while the user is scrolling.

With it, we can make the image show up by scrolling.

Is it really that simple?

We created a simple scrolling effect with a few lines of CSS and Javascript.

Not only that, we can also control the direction of the transition due to scroll.

To do that, we just need to use a value from the four edges.

For example, if we want to convert from top to bottom, the bottom value must be converted from 100% to 0.

Here is the picture that explains that.

And here is an interactive demo.

And here is a demo:

4.5 Hover And Animation Effects

The possibilities to create hover and click effects with clip-path are endless.

Consider the following example.

What we need to do is add a hover effect from a specified position.

In this case, use the circle() value.

To make it easier and more maintaince, use CSS variables.

That way we won’t duplicate the entire clip-path .

We will only change the necessary CSS variables.

Gif below shows how it works.

Not only that, we can change the position of the animation very easily.

I created a demo with the ability to change the location from the drop-down menu.

If you want to dig deeper into animation effects, Mr. Adam Argyle has created a very useful CSS animation library that relies 100% on CSS clip-path .

References:

https://www.transition.style/

4.6 Ripple Effect

The ripple effect has been popular since the release of Material design. With clip-path, we can easily replicate this effect.

The ripple effect has become popular since the release of Material design .

With clip-path , we can easily duplicate this effect.

Complement

To make it easier to use the clip-path value, bennettfeely will help you do that

• Reference links:

https://bennettfeely.com/clippy/

Conclusion

Above is to learn about the clip-path in CSS, hoping to help people in drawing or customizing difficult interfaces.

Thank for watching !!!

Reference

• bennettfeely
• transitioni
• Sloped edges with consistent angle in css
• Clip-path