Published at
Updated at
Reading time
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.

clip-path allows you to clip an element in various ways and 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!

.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 8 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles