csssvgsquarespacecss-mask

Can I make a consistantly sized corner mask-composite for an image?

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));
}
  1. 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.corners working, but image not full width See the snippet below:

.image {
   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-position: bottom left;
  mask-size: 25%;
  mask-repeat: no-repeat;
  mask-composite: exclude;
}
<div id="column-1">
<img src="https://picsum.photos/id/237/200/300" class="image">
<h2>Some Text Here</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Solution

  • Here is an example, using the snippet you give but with the clip-path not the mask.

    The clip-path has fixed the size of the amount taken out by using px units so any image of any aspect-ratio/size will have the same amount taken out.

    div>img {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 80px 100%, 0 calc(100% - 20px));
}
    <div id="column-1">
  <img src="https://picsum.photos/id/237/200/300" class="image">
  <h2>Some Text Here</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

    ADDED: snippet to show the same size bite is taken out regardless of image dimensions:

    <style>
  div>img {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 80px 100%, 0 calc(100% - 20px));
  }
</style>
<div> <img src="https://picsum.photos/id/237/200/300" class="image"> <img src="https://picsum.photos/id/237/200/600" class="image"> <img src="https://picsum.photos/id/237/200/200" class="image"> <img src="https://picsum.photos/id/237/300/300" class="image">
  <img
    src="https://picsum.photos/id/237/600/200" class="image"></div>