I have multiple images that I’d love to have the exact same size of an corner cut-out (like of you were to fold a corner of a page). I’ve tried using polygon(), but when an image isn’t the same dimensions as the majority, the shape changes.

I’ve tried using an SVG as a mask-image, but I can’t seem to get it to work properly with my project.

My client is using squarespace for the development, and I’m fairly new to the builder, and from what I can tell, it doesn’t allow for :root css compatibility.

These are a couple examples of what I have tried:

1. The codepen listed here.

#block-be2f56f7b09c1e03d16d img {
  clip-path: polygon(0 0,100% 0,100% 100%,80px 100%,0 calc(100% - 20px));
}

3. The advice listed here; however, I only see any kind of change when I adapt the code to read:

#block-be2f56f7b09c1e03d16d img {
mask: url('https://images.squarespace-cdn.com/content/666cc44ae1d4196d1b3ab997/77f9aca1-8e05-4b5b-bd7d-7181a4c46a9d/Corner+Mask.png?content-type=image%2Fpng'),
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  mask-size: 25%;
  mask-position: bottom left;
  mask-repeat: no-repeat;
}

With this method, it gives me the desired effect, however the only amount of the image seen is the width of the mask.