My goal is to be able to use a PNG alpha mask to create a "jagged edge" along the bottom of sections/row/containers on a website.
Because the rows can be of any height, I need to be able to apply a thin mask image along just one edge of the element, and still reveal everything above the point at which the mask "starts."
I was able to achieve this in Safari by layering two masks: a linear-gradient (black > black) to cover whatever height the container happens to be, plus a 66px-tall alpha PNG "strip" for the bottom edge of the container, and then setting -webkit-mask-composite: destination-atop — this effectively reverses the mask, allowing everything above the PNG to show through, and only masking off the bottom "ragged" edge.
Here is the code which makes this work in Safari desktop browser:
-webkit-mask: url("mask.png") 0 0/100%, linear-gradient(black, black);
-webkit-mask-composite: destination-atop;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: bottom left;
You can see this working in Safari desktop browser on the white nav bar on this (test/dev) site here: https://wesleyd14.sg-host.com
Unfortunately, it appears that -webkit-mask-composite: destination-atop is not supported in Chrome, and mask-composite does not have an equivalent value for Firefox.
Does anyone know of another method that will accomplish the same thing, i.e. applying a mask only along one edge of a container, while still allowing everything OUTSIDE the mask to remain unmasked?
