Do any CSS freaks know how you might apply a border along the edge of a mask? Example: we have a div with a wavy mask that would be nice to apply a border/stroke to.
Help me understand, this is a div that has a transparency mask which is specified by a SVG bezier curve path. Is that correct?
I've never used one of those before so I don't really know how they work. I don't know if the div is inside the SVG or if the SVG is external to the div and kind of applies as a filter or what.
But regardless of how it works, as long as you can somehow create a separate SVG image that has the same path inside that is overlaid on top of the div with the exact same dimensions, you should be able to apply a stroke to it that way. It's hacky but it should work.
Assuming this is what I think it is, I don't think CSS border image is going to do exactly what you want here.
At any rate, providing a link to the web page or to the source code which would allow someone to render the web page in a browser fairly easily, would really help here. Web hackers love nothing more than opening up the developer tools and messing with someone's site to demonstrate a point.
@lexfeathers At any rate, the SVG that has the stroke on it might have to be flying on top of everything else, not necessarily interacting with the layout.
Like position: absolute inside position: relative, and z-index or something, I don't know. I would have to play with it to figure it out.
@forestjohnson
https://knivesforcats.online/
It's the header and footer, masking with a series of radial gradients! I got it working with a classic ::before and a bottom offset.
@lexfeathers Right, yeah, based on looking at this, I wonder if you could simply apply a stroke to your existing SVG that's being used as the clip path.
https://css-tricks.com/clipping-masking-css/#aa-using-clip-path-with-an-svg-defined-clippath
Also, I just realized I, uh, necroposted on something from month ago