CSS clip-path, what the heck?
Tags: tutorial, css, design, beginners
Published: 2021-12-22 14:05:43

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ry3nyp9c8dsx4gkgaju.png)

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

----

![Star](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yrbx2kq38d1eq25vkhux.png)


```css
#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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rfqakr4dohw36i07vtjl.png)

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.
 
> **Note:** 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:

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

> **Notes:** The default position is `at center`.

![Circle example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t8ivl1d3ko22g665wz61.png)


----

### `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:

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

![Ellipse example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y7sjymo3iarsou3fpvke.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ot8xodolmbkrw5594hb0.png)

----
 
### `polygon()`

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

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

> **Note:** Each couple represents a point.

![Polygon example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ftnhacof1uzwy9rj4zk7.png)

> **Note:** **Firefox** gives you a useful tools to edit in the browser the `polygon` value:

![Polygon tool in Firefox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a7cdkg4cwx6138i1rkof.gif)
 
 
----

### `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:

```css
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:

```css
#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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rwbn3juxstp17xylmwgm.png)

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


> **Note:** It's also possible to reference an **SVG** `clipPath` element with the `url()` value.

```html
<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>
```

```css
#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.

{% codesandbox christmas-tree-5x39f %}

### Transition

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

{% codesandbox hidden-content-cpmgw %}

----
 
## 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.


---- 

Do not hesitate to comment and if you want to see more, you can follow me on [Twitter](https://twitter.com/romain_trotard ) or go to my [Website](https://www.romaintrotard.com).