So I recreated the cool logo on the back of a Veuve Chicquot box while getting familiar with Affinity Designer (great alternative to Illustrator for those sick of adobe and I was thinking about how one might go about making it an animated button. I’m not sure CSS can do convex curves, but I’d like to see my example be able to be clicked and the bottom layer (anchor portion) sinks further in or something.
It would make a nice transition button to navigate down a page rather than the bouncing arrow we see everywhere.
If yes, then you need to spread your design into a svg of the shape with bg color and shadows, a svg of the shape only, and the layer with the anchor. You will animate the anchor down and use the SVG as a mask.
The technology is called clip-path, but as you well noted, because of convex curves, you’re going to need a SVG for the mask, instead of a CSS path.
Read the whole article though SVG appears down the page.