使用CSS面具创建锯齿状边缘

使用CSS蒙版创建锯齿状边缘

我最近在一个项目中需要在横幅图像底部创建一个整齐的锯齿状边缘。

这让我思考了一会儿，在这个过程中我学到了一些东西！我认为我可以写下我的方法，以便你也可以在自己的项目中使用它。

我从一个普通的HTML图像和一个包装元素开始：

<div>
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174390595232013.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Using CSS Masks to Create Jagged Edges ">
</div>

然后，我使用它的::after伪元素在其上放置一个重复的背景图像：

.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;
}

那个背景图像？它是转换为数据URI的SVG代码。这是原始SVG代码。Chris有一个不错的视频，讲解了转换过程。

<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>

“搞定了！”我想。

虽然这确实有效，但天哪，这太麻烦了。像这样在CSS中读取SVG标记很困难。此外，记住引用它们也很烦人（例如url('data:image/svg xml'...')）。当然，我们可以对SVG进行base64编码以避免这种情况，但这更烦人。此外，SVG需要填充与图像相同的背景颜色（或使用它的任何位置），否则它将不起作用。

等等，这不是蒙版的作用吗？是的！是的，这就是蒙版的作用。

这让我想到了一种新方法：使用上面这样的图像作为CSS蒙版，这样横幅图像的“缺失”部分实际上就会缺失。与其在横幅顶部绘制背景颜色的三角形，不如将这些三角形完全从横幅中遮盖掉，让真实的背景显示出来。这样，它就可以在任何背景下工作！

蒙版在几乎所有地方都得到了很好的支持——至少在我这里讨论的简单方法中是这样。我们还在讨论可以用渐进增强实现的东西；如果在给定的浏览器中不支持蒙版，那么你就不会得到锯齿效果。绝对不是世界末日。

此浏览器支持数据来自Caniuse，其中包含更多详细信息。数字表示浏览器在该版本及更高版本中支持该功能。

桌面端

移动/平板

CSS蒙版的一种工作方式是提供一个带有alpha通道的图像作为mask-image。底层元素——被蒙蔽的元素——会根据蒙版图像的alpha通道决定其（半）透明度。因此，如果你的蒙版图像是在透明背景上的白色茶壶，那么被蒙蔽的元素将被裁剪成茶壶的形状，而茶壶外部的所有内容都将被隐藏。

蒙版可能是一个难以理解的概念。Sarah Drasner有一篇文章深入探讨了蒙版，包括它与剪辑的不同之处。蒙版可以做的远不止我们这里讨论的内容。查看规范、caniuse和MDN以获取更多信息。

我们需要的是一个类似于上面SVG的单个“锯齿状”图像，其中左上角一半填充白色，左下角留有半透明。而且，理想情况下，该图像不应该是一个实际的SVG，因为这会让我们回到之前丑陋的数据URI混乱中。

此时你可能会想：“嘿，直接将SVG嵌入CSS中，在其中定义一个蒙版，然后将CSS指向SVG中的蒙版ID！”

好主意！如果你可以编辑HTML，这当然是可以实现的。但是，对于我的特定项目，我在使用WordPress，我真的很想将我的更改限制在纯CSS中，而不是将额外的部分注入HTML。那将是更多工作。我认为这并不罕见；对于这样的演示性更改，不必编辑HTML很有用。我们大多同意避免语义上无用的包装元素只是为了提供样式挂钩，但我认为这也适用于向文档添加整个SVG标记……甚至WordPress模板。

我们可以使用CSS线性渐变来创建三角形：

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

这是在径向背景上的效果，所以你可以看到它是真正透明的：

太棒了！我们可以直接将其用作横幅的mask-image，对吧？我们需要设置mask-size（类似于background-size）和mask-repeat（类似于background-repeat），我们就完成了？

不幸的是，不。没那么好。

第一个原因是，除非你使用的是Firefox，否则你可能会看到上面那个例子根本没有蒙版。这是因为在撰写本文时，Blink和WebKit仍然只支持带有供应商前缀的蒙版。这意味着我们需要-webkit-前缀版本的每个东西。

除了供应商前缀之外，我们所做的在概念上也是错误的。如果我们将蒙版限制在图像的底部条纹上，使用mask-size，那么图像的其余部分根本没有mask-image，这会将其完全遮盖。因此，我们不能单独使用锯齿作为蒙版。我们需要一个mask-image，它是一个与图像大小相同的矩形，底部只有一个锯齿。

像这样：

我们使用两个渐变图像来做到这一点。第一个图像是上面相同的锯齿三角形，它被设置为repeat-x并位于底部，以便它只沿着图像的底部边缘重复。第二个图像是另一个渐变，底部30px透明（以免干扰锯齿），上方不透明（在演示中从黑色到白色），并占据元素的整个大小。

因此，我们现在有了这个楔形块，底部有一个单一的三角形锯齿，它在两个单独的部分中占据了横幅图像的整个高度。最后，我们可以通过水平重复它们来使用这些块作为mask-image，它应该具有我们想要的效果：

就是这样！

以上是使用CSS面具创建锯齿状边缘的详细内容。更多信息请关注PHP中文网其他相关文章！