Artboard 16light, inspiration, solution, idea, innovation,ionicons-v5_logosGoogle 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 7 days ago.

Related Topics

Related Articles