1. 首页
  2. css

使用CSS掩码创建锯齿状边缘

我在做一个项目,在横幅图像的底部有一个整齐的锯齿状边缘。

看起来很锐利。不止一个。

这让我思考了一下,我在这个过程中学到了一些东西!我想我应该写下我是如何使用它的,这样你就可以在你自己的项目中使用它了。

我从包装元素中的一个好的老式HTML图像开始:

<div>

Then I used its ::after伪元素在它上面放置一个重复的背景图像:

.jagged-wrapper::after {content: \"\";background-image: url(\"data:image/svg+xml;utf-8,<svg>

That background image? It\"s SVG code converted to a Data URI. Here\"s the original SVG code. Chris has a nice video where he walks through that conversion.

<svg>

\"There we go!\" I thought.

CodePen Embed Fallback

While that certainly works, geez, that\"s a lot of hassle. It\"s difficult to read SVG markup in CSS like that. Plus, it\"s annoying to have to remember to quote them (e.g. url(\"data:image/svg+xml\"...))。当然,我们可以对SVG进行base64编码来避免这种情况,但这更令人讨厌。另外,SVG需要填充与图像相同的背景色(或者在使用它的任何地方),否则它将无法工作。

等等,这不是掩蔽的目的吗?对!是的,这个就是掩蔽的作用。

这让我想到了一个新的方法:使用像上面那样的图像作为CSS掩蔽,这样横幅图像中\"丢失\"的部分实际上就会丢失。与其在横幅顶部绘制背景颜色的三角形,不如将这些三角形从横幅上完全遮住,让真实的背景显示出来。这样,它可以在任何背景下工作!

屏蔽几乎在任何地方都得到支持-至少以我在这里所说的简单方式。我们还讨论了一些可以通过渐进增强来实现的功能;如果给定的浏览器不支持掩码,那么您就不会得到锯齿效果。绝对不是世界末日。

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

桌面

<IE

<Safari

<94*

<53

<91*

Chrome Firefox Edge
<No <TP*

Mobile91<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<作为一个mask-image。底层元素-被掩蔽的元素-变得(半)透明到mask-image的alpha通道所规定的程度。因此,如果你的蒙版图像是一个透明背景上的白色茶壶,那么蒙版元素将被切割成茶壶的形状,外面的一切都将被隐藏起来//codepen.io/anon/embed/qBOqeyL?height=450&amp;theme id=1&amp;slug hash=>CodePen Embed Fallback

掩蔽可能是一个棘手的概念。莎拉德拉斯纳有一篇文章,深入探讨了掩蔽,包括它是如何不同于剪辑。面具所能做的远不止我们这里所说的。更多信息,请查看specs、caniuse和MDN。

我们需要的是一个类似于上面SVG的\"锯齿\"形图像,左上半部分填充为白色,左下半部分为半透明。而且,理想情况下,该图像不会是一个真正的SVG,因为这会让我们回到以前的丑陋的数据URI混乱中。

此时您可能会想:\"嘿,直接将SVG嵌入CSS中,在其中定义一个掩码,然后将CSS指向SVG中的掩码ID!\"好主意!如果你可以编辑HTML,那么这当然是可行的。然而,对于我的特定项目,我在WordPress工作,我真的希望将我的更改限制在纯CSS上,而不是在HTML中注入额外的部分。那会是更多的工作。我不认为这是不寻常的;对于这样一个表示形式的改变,不必编辑HTML是很有用的。我们的想法是避免语义上毫无价值的包装元素,仅仅是为了提供样式挂钩,但我觉得这也适用于将整个SVG标记添加到文档…甚至是WordPress模板。

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

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

背景,所以你可以看到它非常透明:

CodePen嵌入回退

太棒了!我们可以把它当作我们旗帜上的mask-image,对吧?我们需要设置mask-size,就像background-size,和mask-repeat,就像background-repeat,我们好吗?

CodePen Embed Fallback

不幸的是,不太好。

第一个原因是,除非您使用的是Firefox,否则在上面的示例中可能根本看不到掩蔽。这是因为在编写本文时,Blink和WebKit仍然只支持带有供应商前缀的掩蔽。这意味着我们需要有10个前缀的版本

使用CSS掩码创建锯齿状边缘 为WP2原创文章,链接:https://www.wp2.cn/css/%e4%bd%bf%e7%94%a8css%e6%8e%a9%e7%a0%81%e5%88%9b%e5%bb%ba%e9%94%af%e9%bd%bf%e7%8a%b6%e8%be%b9%e7%bc%98/

发表评论

您的电子邮箱地址不会被公开。