Artboard 16Google Sheets iconSwift icon
Published at
Updated at
Reading time
1min
This post is part of my Today I learned series in which I share all my web development learnings.

I've been reading one of Temani Afif's CSS magic posts and discovered a clip-path CSS trick I wasn't aware of.

clip-path allows you to clip an element in various ways. You can use geometric shapes like circles and SVG paths. It's pretty cool!

.element {
  clip-path: circle(50px at 0 100px);
  clip-path: path(
    "M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z"
  );
}

But to be fair, I haven't used clip-path extensively, because a) my projects aren't that fancy, and b) I can't be bothered with creating complicated SVG paths.

But then there's also polygon. With polygon you can define clipping pointed with relative percentages. Handy!

.element {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

And Temani shared that you can even define points outside the 100% range, too! 😲

It’s a little known fact that clip-path accepts values outside the 0%-100% range, which allows us to create “overflowing” shapes.

This detail is something I could get my head around to create some custom corners!

Playground
1234
.red-square {
  clip-path: polygon(
    -20% 20%,
    20% -20%,
    120% 80%,
    80% 120%
  );
};

Thank you, Temani!

Was this TIL post helpful?
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 14 days ago.

Related Topics

Related Articles