Using CSS Masks to Create Jagged Edges

Create jagged edges using CSS mask

I recently had to create a neat jagged edge at the bottom of the banner image in a project.

This made me think for a while and I learned something in the process! I think I can write down my method so that you can use it in your own project as well.

I start with a normal HTML image and a wrapper element:

<div>
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174390595232013.jpg" class="lazy" alt="Using CSS Masks to Create Jagged Edges">
</div>

Then I use its ::after pseudo-element to place a duplicate background image on it:

 .jagged-wrapper::after {
  content: "";
  background-image: url('data:image/svg xml;utf-8, <svg preserveaspectratio="none" viewbox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><polygon points="1,0 1,1 0,1 " style="fill:white;"></polygon></svg> ');
  background-size: 30px 30px;
  width: 100%;
  height: 30px;
  position: absolute;
  bottom: 0px;
  right: 0;
  z-index: 2;
}

That background image? It is the SVG code converted to a data URI. This is the original SVG code. Chris has a nice video explaining the conversion process.

<svg preserveaspectratio="none" viewbox="0 0 1 1" xmlns="http://www.w3.org/2000/svg">
  <polygon points="1,0 1,1 0,1 " style="fill: white;"></polygon>
</svg>

"It's done!" I thought.

While this does work, my goodness, it's so troublesome. Reading SVG tags in CSS like this is difficult. Also, remembering to quote them is annoying (e.g. url('data:image/svg xml'...') ). Of course, we can base64 encoding the SVG to avoid this, but it's even more annoying. Also, the SVG needs to be filled with the same background color as the image (or anywhere you use it), otherwise it won't work.

Wait, isn't this the function of a mask? Yes! Yes, that's what the mask does.

This leads me to a new approach: use an image like this as a CSS mask so that the "missing" part of the banner image will actually be missing . Instead of drawing triangles of background color on the top of the banner, cover them completely from the banner and let the real background show. That way, it can work in any context!

The mask is very supportive in almost every place – at least in the simple approach I discussed here. We're also talking about something that can be implemented with progressive enhancement; if masks are not supported in a given browser, you won't get jagged effects. It is definitely not the end of the world.

This browser supports data from Caniuse, which contains more details. The number indicates that the browser supports this feature in this version and later.

Desktop

Mobile/Tablet

One way of working of CSS masks is to provide an image with an alpha channel as mask-image . The underlying element—the blinded element—determines its (semi)transparency based on the alpha channel of the masked image. So if your mask image is a white teapot on a transparent background, the blinded elements will be cut into the shape of the teapot and everything on the outside of the teapot will be hidden.

Masks can be an incomprehensible concept. Sarah Drasner has an article that explores the mask in depth, including how it differs from editing. Masks can do much more than what we discuss here. Check out the specifications, caniuse, and MDN for more information.

What we need is a single "jagged" image similar to the SVG above, where the upper left half is filled with white and the lower left corner is translucent. And, ideally, the image shouldn't be an actual SVG, as this will bring us back to the ugly data URI chaos before.

At this point you might be thinking: "Hey, embed the SVG directly into the CSS, define a mask in it, and point the CSS to the mask ID in the SVG!"

Good idea! If you can edit HTML, this is certainly possible. However, for my specific project, I'm using WordPress, I really want to limit my changes to pure CSS instead of injecting the extra parts into HTML. That would be more work. I don't think this is uncommon; for such demo changes, it's useful not to have to edit HTML. We mostly agree that avoiding semantically useless wrapping elements is just to provide style hooks, but I think this also applies to adding entire SVG tags to the document...even WordPress templates.

We can use CSS linear gradients to create triangles:

 .el {
  background-image: linear-gradient(
    to bottom right,
    White,
    white 50%,
    transparent 50%,
    transparent
  );
}

This is the effect on a radial background, so you can see that it is truly transparent:

marvelous! We can use it directly as mask-image for banners, right? We need to set mask-size (similar to background-size ) and mask-repeat (similar to background-repeat ), and we're done?

Unfortunately, no. Not that good.

The first reason is that unless you are using Firefox, you may see that the example above has no mask at all. This is because at the time of writing, Blink and WebKit still only support masks with vendor prefixes. This means we need every thing with -webkit- prefix version.

Besides the vendor prefix, what we do is conceptually wrong. If we limit the mask to the bottom stripes of the image, using mask-size , then the rest of the image does not have mask-image at all, which will completely obscur it. Therefore, we cannot use jagged as masks alone. We need a mask-image which is a rectangle with the same size as the image, with only one jagged at the bottom.

Like this:

We do this using two gradient images. The first image is the same jagged triangle above, which is set to repeat-x and is located at the bottom so that it only repeats along the bottom edge of the image. The second image is another gradient, with the bottom 30px transparent (to avoid disturbing the jagging), the top opaque (from black to white in the demo), and occupying the entire size of the element.

So we now have this wedge block with a single triangular serration at the bottom which occupies the entire height of the banner image in two separate sections. Finally, we can use these blocks as mask-image by repeating them horizontally, which should have the effect we want:

That's it!

The above is the detailed content of Using CSS Masks to Create Jagged Edges. For more information, please follow other related articles on the PHP Chinese website!