使用CSS面具創建鋸齒狀邊緣

使用CSS蒙版創建鋸齒狀邊緣

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

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

我從一個普通的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;
}

那個背景圖像？它是轉換為數據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中文網其他相關文章！