CSS clip-path can go outside of an element

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! 😲

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!