Skip to content

Rainbow
Apps

Rainbow
Apps

CSS clip-path, what the heck?

Welcome to my first CSS's article, I propose to talk about clip-path property. This will allow you to do a multitude of things that we will see here.

It's something that enables to you a lot of things we are going to see here.

Quick presentation

The clip-path property makes it possible to you to do any fancy shape you have in mind and extract it from image, div, ... The content inside the clip-path will be shown, while those outside will be hidden. When you are clipping an element, only the visible part will trigger events (click, hover, ....) which is really cool.

For example, it's possible to do some avatar:

Avatar

#avatar {
  clip-path: circle(50%);
}

Star

#star {
  width: 100px;
  height: 100px;
  background-color: red;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

How to make shapes?

You may have seen in my previous examples two ways to do make some shape. Before seeing each way to do that, let's see the coordinate system.

Coordinate system

An image is better than words:

Coordinate system

As you can see the origin is at the top-left corner of the element, the x-axis going right and the y-axis going down.

You can use every measurement unit. If you use %, the values are relative to the size of the element. Personally I find it better to use % because it will keep the right proportion in relation to the element.


circle()

One of the possible value to clip-path is circle(). You can define the radius and the position of the center with the following syntax:

clip-path: circle(50px at 100px 100px);

The default position is at center.

Circle example


ellipse()

It's also possible to make ellipse thanks to ellipse(). You have to define x-radius and y-radius, and can also set the position of the center. The syntax is:

clip-path: ellipse(100px 50px at 0 0);

Ellipse example

If you want the ellipse to take all the element area, you have access to two specific values to make it easier:

  • closest-side: Take the size from the center to the closest border.
  • farthest-side: Take the size from the center to the farthest border.

inset()

Another possibility is to define an inset rectangle with inset(). You can define offsets from side of the element (same format than margin) and rounded corner using the round keyword (same format than border-radius).

Inset example


polygon()

The polygon() enables us to define a list of vertices to create shape. The syntax is:

clip-path: polygon(
    33% 0,
    66% 0,
    100% 33%,
    100% 66%,
    66% 100%,
    33% 100%,
    0 66%,
    0 33%
  );

Each couple represents a point.

Polygon example

Firefox gives you a useful tools to edit in the browser the polygon value:

Polygon tool in Firefox


path()

You can also define a shape with SVG path with the path() value. I'm not gonna explain how to build an SVG path, because not gonna lie, I just learned how to draw some curves this morning to make the example ^^ But I think I'm gonna try hard this because we can do some crazy things with SVG and animation. Here is an example:

clip-path: path(
  "M 50 175 L 0 100 Q 25 50 50 100 Q 75 50 100 100"
);

And with the full css we can get:

#heart {
  width: 100px;
  height: 200px;
  background-color: red;
  clip-path: path(
    "M 50 175 L 0 100 Q 25 50 50 100 Q 75 50 100 100"
  );
}

Path example

Yep I agree, not so good but pretty satisfied. Don't be too hard with me please :)

It's also possible to reference an SVG clipPath element with the url() value.

<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="svgHeart">
      <path d="M 50 175 L 0 100 Q 25 50 50 100 Q 75 50 100 100"
            stroke="black" fill="red" />
    </clipPath>
  </defs>
</svg>

<div id="heart"></div>
#heart {
  width: 100px;
  height: 200px;
  background-color: red;
  clip-path: url(#svgHeart);
}

Some examples

Now that you know the theory let's see some examples of what you can do with it.

Christmas tree

Christmas is coming soon, so let's make a Christmas tree to put your presents under it.

Transition

Here is an example of what you can do when combining with an animation.


Conclusion

So I hope you liked this CSS article about clip-path and see the power that it can give you. I decided not to talk about the <geometry-box> feature which can give you the possibility to defines the reference box for the shapes (by default border-box). Because, for the moment, just Firefox manages this new feature.

12-22-2021

Rainbow Apps

Get it on Google Play

© Copyright 2022 Rainbow Apps. All rights reserved.

Rainbow Apps

© Copyright 2022 Rainbow Apps.
All rights reserved.

Get Numbersion app

Get it on Google Play

Follow me