使用CSS蒙版創(chuàng)建鋸齒狀邊緣

我最近在一個項(xiàng)目中需要在橫幅圖像底部創(chuàng)建一個整齊的鋸齒狀邊緣。

這讓我思考了一會兒，在這個過程中我學(xué)到了一些東西！我認(rèn)為我可以寫下我的方法，以便你也可以在自己的項(xiàng)目中使用它。

我從一個普通的HTML圖像和一個包裝元素開始：

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

然後，我使用它的::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;
}

那個背景圖像？它是轉(zhuǎn)換為數(shù)據(jù)URI的SVG代碼。這是原始SVG代碼。 Chris有一個不錯的視頻，講解了轉(zhuǎn)換過程。

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

“搞定了！”我想。

雖然這確實(shí)有效，但天哪，這太麻煩了。像這樣在CSS中讀取SVG標(biāo)記很困難。此外，記住引用它們也很煩人（例如url('data:image/svg xml'...') ）。當(dāng)然，我們可以對SVG進(jìn)行base64編碼以避免這種情況，但這更煩人。此外，SVG需要填充與圖像相同的背景顏色（或使用它的任何位置），否則它將不起作用。

等等，這不是蒙版的作用嗎？是的！是的，這就是蒙版的作用。

這讓我想到了一種新方法：使用上面這樣的圖像作為CSS蒙版，這樣橫幅圖像的“缺失”部分實(shí)際上就會缺失。與其在橫幅頂部繪製背景顏色的三角形，不如將這些三角形完全從橫幅中遮蓋掉，讓真實(shí)的背景顯示出來。這樣，它就可以在任何背景下工作！

蒙版在幾乎所有地方都得到了很好的支持——至少在我這裡討論的簡單方法中是這樣。我們還在討論可以用漸進(jìn)增強(qiáng)實(shí)現(xiàn)的東西；如果在給定的瀏覽器中不支持蒙版，那麼你就不會得到鋸齒效果。絕對不是世界末日。

此瀏覽器支持?jǐn)?shù)據(jù)來自Caniuse，其中包含更多詳細(xì)信息。數(shù)字表示瀏覽器在該版本及更高版本中支持該功能。

桌面端

移動/平板

CSS蒙版的一種工作方式是提供一個帶有alpha通道的圖像作為mask-image 。底層元素——被蒙蔽的元素——會根據(jù)蒙版圖像的alpha通道決定其（半）透明度。因此，如果你的蒙版圖像是在透明背景上的白色茶壺，那麼被蒙蔽的元素將被裁剪成茶壺的形狀，而茶壺外部的所有內(nèi)容都將被隱藏。

蒙版可能是一個難以理解的概念。 Sarah Drasner有一篇文章深入探討了蒙版，包括它與剪輯的不同之處。蒙版可以做的遠(yuǎn)不止我們這裡討論的內(nèi)容。查看規(guī)範(fàn)、caniuse和MDN以獲取更多信息。

我們需要的是一個類似於上面SVG的單個“鋸齒狀”圖像，其中左上角一半填充白色，左下角留有半透明。而且，理想情況下，該圖像不應(yīng)該是一個實(shí)際的SVG，因?yàn)檫@會讓我們回到之前醜陋的數(shù)據(jù)URI混亂中。

此時你可能會想：“嘿，直接將SVG嵌入CSS中，在其中定義一個蒙版，然後將CSS指向SVG中的蒙版ID！”

好主意！如果你可以編輯HTML，這當(dāng)然是可以實(shí)現(xiàn)的。但是，對於我的特定項(xiàng)目，我在使用WordPress，我真的很想將我的更改限制在純CSS中，而不是將額外的部分注入HTML。那將是更多工作。我認(rèn)為這並不罕見；對於這樣的演示性更改，不必編輯HTML很有用。我們大多同意避免語義上無用的包裝元素只是為了提供樣式掛鉤，但我認(rèn)為這也適用於向文檔添加整個SVG標(biāo)記……甚至WordPress模板。

我們可以使用CSS線性漸變來創(chuàng)建三角形：

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

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

太棒了！我們可以直接將其用作橫幅的mask-image ，對吧？我們需要設(shè)置mask-size （類似於background-size ）和mask-repeat （類似於background-repeat ），我們就完成了？

不幸的是，不。沒那麼好。

第一個原因是，除非你使用的是Firefox，否則你可能會看到上面那個例子根本沒有蒙版。這是因?yàn)樵谧珜懕疚臅r，Blink和WebKit仍然只支持帶有供應(yīng)商前綴的蒙版。這意味著我們需要-webkit-前綴版本的每個東西。

除了供應(yīng)商前綴之外，我們所做的在概念上也是錯誤的。如果我們將蒙版限制在圖像的底部條紋上，使用mask-size ，那麼圖像的其餘部分根本沒有mask-image ，這會將其完全遮蓋。因此，我們不能單獨(dú)使用鋸齒作為蒙版。我們需要一個mask-image ，它是一個與圖像大小相同的矩形，底部只有一個鋸齒。

像這樣：

我們使用兩個漸變圖像來做到這一點(diǎn)。第一個圖像是上面相同的鋸齒三角形，它被設(shè)置為repeat-x並位於底部，以便它只沿著圖像的底部邊緣重複。第二個圖像是另一個漸變，底部30px透明（以免干擾鋸齒），上方不透明（在演示中從黑色到白色），並佔(zhàn)據(jù)元素的整個大小。

因此，我們現(xiàn)在有了這個楔形塊，底部有一個單一的三角形鋸齒，它在兩個單獨(dú)的部分中佔(zhàn)據(jù)了橫幅圖像的整個高度。最後，我們可以通過水平重複它們來使用這些塊作為mask-image ，它應(yīng)該具有我們想要的效果：

就是這樣！

以上是使用CSS面具創(chuàng)建鋸齒狀邊緣的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！