Lmst
Login

#ClipPath

Ana Tudor 🐯anatudor
2026-01-14

A little thing: candy 🍬 ghost 👻 buttons, 3 techniques in one @codepen demo
codepen.io/thebabydino/pen/Exv

Detailed explanation of the how behind in this @csstricks post css-tricks.com/css-ing-candy-g

Bonus: a hover animated, Chrome-only version codepen.io/thebabydino/pen/Vwz

Bright candy gradient ghost buttons.Same buttons in various stages of hover, when the filling content-box get XOR-ed with the text.
Ana Tudor 🐯anatudor
2026-01-09

Cool concave rounding header component on @codepen: codepen.io/thebabydino/pen/azO

screenshot of the linked demo highlighting a header with both convex and concave roundings.
lemssiahlemssiah
2025-12-18

Simulating the Earth’s rotation using CSS and the clip-path property isn’t new. Is this any good?

codepen.io/art-eque/pen/XWGMpOW

Ana Tudor 🐯anatudor
2025-12-17

Here's a little pure demo I made on @codepen a while back: clip element on codepen.io/thebabydino/pen/vEG

(using scroll-driven animations, so support may still be spotty)

Ana Tudor 🐯anatudor
2025-11-18

Funky forms on @codepen codepen.io/thebabydino/pen/rae

Full 3D form option vs. weird 2D shape. Which do you prefer?

Screenshot of the linked demo. Shows a form all rotated in 3D on the left, while on the right there's a form with about the same shape as the 3D projection, except its contents are not transformed.
Ana Tudor 🐯anatudor
2025-10-09

Because someone just hearted this demo I made over half a decade ago on @codepen:

codepen.io/thebabydino/pen/bGE

It's a pure Platonic solids gallery. They animate on hover/ tap. All is computed, there are no magic numbers.

Ana Tudor 🐯anatudor
2025-10-09

BTW, the CSS is heavily commented. And I've changed the images to something a bit more fitting for this time of year.

codepen.io/thebabydino/details

And now you can tell what gave me the idea for yesterday's challenge mastodon.social/@anatudor/1153

Screenshot from my CodePen demo showing the heavily commented CSS and the visual result using Halloween-related images.
Ana Tudor 🐯anatudor
2025-10-08

Because this got asked on reddit reddit.com/r/css/comments/1o06

Made a demo with various options for angled grid columns. Uses mathematical computations to ensure all fits just right all the time, regardless of viewport or number of columns.

On @codepen codepen.io/thebabydino/pen/Wbr

Enjoy!

Ana Tudor 🐯anatudor
2025-05-24

A little thing I made on @codepen.io: breathing with `shape()`
codepen.io/thebabydino/pen/vEE

`shape()` is supported in Chrome 135+ and Safari 18.4+.

Firefox 126+ supports it for simple shapes (but not for this demo) when setting thelayout.css.basic-shape-shape.enabled to true in about:config.

Ana Tudor 🐯anatudor
2025-05-02

Someone asked how to create such cross-browser wave dividers that keep the same height as the width changes, so here's my take on it reddit.com/r/css/comments/1kcm

Live on @codepen codepen.io/thebabydino/pen/Pww

`mask` is another option, but needs an extra container and container query units, so not as well supported, plus it wouldn't be exactly the same shape.

Ana Tudor 🐯anatudor
2025-04-10

`clip-path` or `mask` are applied after `filter`.

This means we cannot clip/ mask, then add a `drop-shadow()` on the same element for the clipped/ masked shape.

We need to apply the `filter` on a parent of the clipped/ masked (pseudo-)element.

codepen.io/thebabydino/pen/BRR

Diagram of how browsers apply filter and clip-path when they’re set on the same element. First the drop-shadow() filter is applied on the initial rectangular box, then the element with drop-shadow() is clipped, cutting out the drop-shadow() too.Screenshot of the linked demo showing how applying the filter on the parent of the clipped (pseudo-)element can solve the problem if this parent has no other visible parts (borders, backgrounds, shadows).
Ana Tudor 🐯anatudor
2025-04-09

Here's a quick breathing box demo with `clip-path: shape()` on @codepen.io: codepen.io/thebabydino/pen/ZYE

Working in Chrome 135 and Safari 18.4! 🥳🎉

Ana Tudor 🐯anatudor
2025-04-09

I haven't had the time to do anything for this week's yet, but here are some older card demos:

From 5+ years ago: pure 1 element bevel cards! No SVG or images save for the cat, real (semi)transparency inside borders and all.

See it on @codepen codepen.io/thebabydino/pen/ZEG

Screenshot of linked demo. Shows 7 beveled cards, some with borders (solid, gradient or patterned ones), some with (semi)transparent backgrounds, some with gradient backgrounds, one with an image background. They are all on top of an image backdrop.
Ana Tudor 🐯anatudor
2025-03-17

Because I saw a @codepen demo creating a hex grid using my well over a decade old nested and reverted transforms technique to get the shape + MQs...

Here's a super simple modern grid + clip-path + mathematical functions responsive version with no breakpoints codepen.io/thebabydino/pen/QwW

Screenshot of linked demo with DevTools open, highlighting the main grid and showing there are no media queries at play.
Ana Tudor 🐯anatudor
2025-03-17

Know how border-image & border-radius don't play nice together?

(interactive codepen.io/thebabydino/pen/jxZ)

there's a workaround IF corner radius ≤ border-width: use inset() clip-path + a round value!

clip-path: inset(0 round $r)

@codepen demo: codepen.io/thebabydino/pen/qBE

(and yes, this is a tip I first shared on twitter over half a decade ago x.com/anatudor/status/12199161 )

Screenshot showing the interactive demo showing that setting a `border-image` on an element with `border-radius` makes the `border-radius` be ignored.Screenshot of the solution when the desired corner rounding is not bigger than the border-width: ``` border: solid $r; border-image: linear-gradient(90deg, purple, orange) 1; clip-path: inset(0 round $r) ```
Ana Tudor 🐯anatudor
2024-10-25

Another super old @codepen demo I redid with modern is this yummy menu codepen.io/thebabydino/pen/Aox

CSS grid instead of absolute positioning, clip-path instead of nested skew and un-skew, CSS variables to avoid setting a separate transform chain on each item... and more!

Ana Tudor 🐯anatudor
2024-10-16

Here's a little thing 🦜 I made on @codepen:

codepen.io/thebabydino/pen/bGX

Uses clip-path, CSS grid, variables, halftone patterns mastodon.social/@anatudor/1124 and more! 🌟

Angled sections, each containing info about and a photo of a parrot species. The image itself is clipped, but that doesn't include the parrot itself.
Ana Tudor 🐯anatudor
2024-10-16

Here's another little something from forever ago that I've recently updated on @codepen: a circular menu!

codepen.io/thebabydino/pen/nKz

The code was really outdated, so I redid it to use CSS variables, trigonometry, grid, clip-path, SVG filters for the inner shadow & grain.

Hope you like it!

Ana Tudor 🐯anatudor
2024-10-16

Also on the topic of circle sectors/ pie slices 🥧 - I've updated an old SO answer of mine stackoverflow.com/a/14185845/1

This goes through the simplest code possible in 2024 for a few cases (equal slices or not, interactive/ with content or not).

Screenshot of the code + visual result in the simplest possible case: all the slices are equal and they don't need to be elements (interactive, holding text content). ``` .pie { width: 16em; /* set width to desired pie diameter */ aspect-ratio: 1; /* make pie element square */ border-radius: 50%; /* turn square into disc */ /* equally sized slices */ background: conic-gradient(from 17deg, #f94144 14%, #f3722c 0% 29%, #f8961e 0% 43%, #f9c74f 0% 57%, #90be6d 0% 71%, #43aa8b 0% 86%, #577590 0%) } ```
Ana Tudor 🐯anatudor
2024-09-12

Ever want a pure CSS regular ?

Back in 2016, I first wrote this to generate one. I've had others before, but this is the one I've kept updating it ever since and it's heavily commented.

You just need to pass it a number of vertices and an initial rotation.

@codepen demo: codepen.io/thebabydino/pen/mEg

Screenshot. Shows calling the mixin with: ``` @include polygon(6) ``` This creates a regular polygon with 6 vertices and 6 edges (regular hexagon) and with the offset angle (the angle of the circumcircle radius to the first vertex) not set, which means it falls back on the default value, which is -90° for polygons with an odd number of vertices and -90° + .5·ba, where ba is the base angle corresponding to a polygon edge.Screenshot. Shows calling the mixin with: ``` @include polygon(6) ``` This creates a regular polygon with 6 vertices and 6 edges (regular hexagon) and with the offset angle (the angle of the circumcircle radius to the first vertex) not set, which means it falls back on the default value, which is -90° for polygons with an odd number of vertices and -90° + .5·ba, where ba is the base angle corresponding to a polygon edge.Screenshot. Shows calling the mixin with: ``` @include polygon(5, 0deg) ``` This creates a regular polygon with 5 vertices and 5 edges (regular pentagon) and with the offset angle (the angle of the circumcircle radius to the first vertex) set to 0°.Screenshot. Shows calling the mixin with: ``` @include polygon(10, 9deg) ``` This creates a regular polygon with 10 vertices and 10 edges (regular decagon) and with the offset angle (the angle of the circumcircle radius to the first vertex) set to 9°.

Client Info

Server: https://mastodon.social
Version: 2025.07
Repository: https://github.com/cyevgeniy/lmst