I recently read an article about the clip-path application and realized that I didn’t know much about this CSS property, so I decided to take a closer look at it. I searched online and came across an article called Understanding Clip Path in CSS. It introduces clip-path in a simple and in-depth way. After reading it, I decided to translate it to supplement my own views, which can be regarded as my translation + notes.

Understanding Clip Path in CSS

introduce

The clip-path property creates a clipping area where content is visible and hidden outside. The following example demonstrates a circular clipping region.

.card {
  background-color: #77cce9;
  clip-path: circle(80px at 50% 50%);
}
Copy the code

Card After clip-path is used, only one blue circle is visible in the visible area, and all contents outside the circle are invisible.

Rectangular coordinate system

Before diving into the details of clip-path, it’s worth mentioning how rectangular coordinate systems work. The origin is the upper left corner, x-right, y-down

With this in mind, look at a simple example of how elements can be clipped. In this example, the clipping area is a 100px circle with a center at 0,0 (upper left corner).

Note that only the emphasis area (dark blue) is visible to the user; the area outside the circle is clipped. So the question is, how can we show the whole circle? We need to change the x and y axes.

The center of the circle is 100px to the left x axis and 100px to the top y axis. Now that you understand how cartesian coordinates work, I’ll explain the clip-path values.

Clip – the value of the Path

Inset

The inset value defines an embedded rectangle. We can control four edges, just like we do margin or padding. The following example shows a region with inset edges (up, down, left, and right) of 20px.

You can twist one side. Here’s an example:

.card {
  clip-path: inset(20px 20px 50px 20px);
}
Copy the code

The question is can we have rectangular edges embedded in circular borders? Use the keyword round, of course! Append the keyword

to round the corner.

.card {
  clip-path: inset(20px 20px 50px round 15px);
}
Copy the code

(Inset and Round, combined with the BorderImage, can create a colorful round border. For details, see: Subtly implement a rounded gradient border.)

Circle

To use circle(), we need a radius and a position. Here’s an example:

.card {
  clip-path: circle(80px at 50% 50%);
}
Copy the code

The radius of the circle is 80px, and its position is 50% away from the x and y axes.

Ellipse

With ellipse(), we can create an ellipse by setting its width and height.

.card {
  clip-path: ellipse(100px 80px at center);
}
Copy the code

polygon

For me, Polygon () is the most interesting. We have the ability to control multiple different x and y values.

.card {
  clip-path: polygon(5% 5%.95% 5%.95% 95%.5% 95%);
}
Copy the code

We can use polygon to set values for multiple points and draw complex shapes.

(Translator’s note: The whole article doesn’t go into the details of polygon, and I couldn’t figure it out when I read MDN. Then I found a website called Clippy that visually sets polygon properties without having to manually tune them. It’s great.)

Path

Path () allows us to crop a specific area using an SVG path. Browser compatibility is temporarily inconsistent. To make it usable in different browsers, we need to inline the SVG and use the URL () as the clip-path value.

<svg class="svg">
  <clipPath id="triangle" clipPathUnits="objectBoundingBox">
    <path d="0.05 the h1 v1 M0.05,"></path>
  </clipPath>
</svg>
Copy the code

.card {
  clip-path: url("#triangle");
}
Copy the code

Now that we know the theory of clip-path and what it can take on, it’s time to explore some use cases using it in action. Are you ready?

Use cases

Bevel effect

In some ways, you may see an area of the site with a slightly beveled background, which can be fully achieved with clip-path.

Can you guess how to achieve the bevel effect? We need to use polygon().

.section {
  clip-path: polygon(0 0.100% 0.100% 80%.0 100%);
}
Copy the code

In some cases, tweaking polygon’s 8 values can be annoying. I have a little trick that I can use to create the shapes that we want. First, we need to add the following attributes:

.section {
  clip-path: polygon(0 0.100% 0.100% 100%.0 100%);
}
Copy the code

After that, we need to check the corresponding elements under the developer tools. Notice the small polygon icon to the left of the polygon() value.

Once you click on the icon, you can edit polygons in Viewer.

(Translator’s note: Only Firefox can use it, it is better than the method I just gave)

Makes the bevel effect relative to the window width visible to the user

We can also use CSS’s calc() to blend CSS’s visual window unit (VM) with the Angle relative to the visual window width. I learned this from Kilian Valkhof’s Sloped edges with consistent Angle in CSS.

.section {
  clip-path: polygon(0 0.100% 0.100% calc(100% - 5vw), 0 100%);
}
Copy the code

Multiple bevel effects

Student: I have a question, if we want multiple bevel regions? See below:

The first thing that comes to mind is simply adding box-shadow or border. Unfortunately, the above attributes are clipped, so even if we add one, it won’t show up as expected.

In this case, the solution is to use multiple elements, each with a different clipping point. Here’s how:

<div class="hero">
  <img src="bg.jpg" alt="" />
</div>
Copy the code

.hero {
  position: relative;
  min-height: 350px;
}

.hero img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 0.100% 0.100% 80%.0 90%);
}

.hero:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -20%;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: #4545a0;
  clip-path: polygon(0 0.100% 0.100% 80%.0 90%);
}
Copy the code

We have a pseudo-element with the same size and clip-path as the other elements. The difference is that it is below the parent by bottom-20% and z-index-1. I use 20% because it’s a 100-80 result.

Show in scroll

By using the IntersectionObserver API, elements are displayed only when the user scrolls through the page.

Inset

Inset is the clip-path value THAT I find most useful for this effect. Why, you might think? I’ll show you in the next picture.

Note that through inset(50%), the blue rectangle is completely unmangosteen. Yeah, it’s 50% because we set inset from four sides. That is, inset shrinks from the edge of the rectangle to the center.

In the image below, inset is used to display images as the user scrolls through the page.

When the image is in a visible window, the javascript code below increases the IS-Visible class so that we can display the page by scrolling.

const images = document.querySelectorAll("img");

function check(entries) {
  entries.map((entry) = > {
    if (entry.isIntersecting) {
      entry.target.classList.add("is-visible"); observer.unobserve(entry.target); }}); }const observer = new IntersectionObserver(check);
images.forEach((image) = > observer.observe(image));
Copy the code

img {
  clip-path: inset(50%);
  transition: 1.2 s ease-in;
}

img.is-visible {
  clip-path: inset(0);
}
Copy the code

Easy, right? We use a few lines of CSS and javascript to create a simple scrolling effect.

Demo

Not only that, but we can control the direction of the presentation transition. We just need the value of one of the four sides. For example, if we want a top-down transition, the base value should range from 100% to zero. The diagram below illustrates the above principle.

Attached interactive link:

demo

Hover and animation effects

The possibilities for creating hover animations with clip-path are endless. Consider the following example:

We need to increase the hover effect to the specified position. Use circle() to do this.

To make the example easier and more maintainable, we use CSS variables, so instead of repeating the entire clip-path, we only change the CSS variables we need.

:root {
  --pos: left center;
  --size: 0;
}

.stats__item:before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #7777e9;
  clip-path: circle(var(--size) at var(--pos));
  transition: 0.4 s linear;
}

.stats__item:hover:before {
  --size: 300px;
}
Copy the code

Not only that, we can easily change the animation. I built an interactive demo that can be changed by selecting a box.

demo

If you want to learn more about animation effects, Mr. Adam Argyle has created a very useful CSS animation library that is 100% CLIp-path CSS dependent. Transition.css

Even without a result

Lian Yi effect is popular due to the emergence of Material design. With clip-path, we can easily reproduce this effect.

<button class="button"><span>Sign up now</span></button>
Copy the code

.button {
  position: relative;
}

.button span {
  position: relative;
  z-index: 1;
}

.button:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0.1;
  clip-path: circle(0 at center);
  transition: 0.3 s ease-out;
}

.button:hover:before {
  clip-path: circle(100px at center);
}
Copy the code

demo

Clip-path is worth knowing

Invisible areas are not receivedpointerThe event

When a region is clipped, regions outside it do not receive any pointer events. This means that the user cannot hover over an invisible area.

You can use relative terms

Can you clip-path relative to font size? You can use EM or REM in clip-path.