【譯】CSS沒有邊界的裁剪路徑 - Clip Paths

譯者：果凍cc
原文地址： 24ways.org/2018/clip-p…

隨着瀏覽器對shape-outside和clip-path等屬性的支持增長，CSS Shapes愈來愈受到關注。有幾種方法可使用CSS Shapes，特別是clip-path屬性，乍一看咱們並不知道這個屬性如何使用，下面就來詳細的介紹它。

裁剪路徑clip path的基礎知識

在深刻研究以前，咱們應該先看看基本的形狀和clip-path。裁剪路徑能夠將CSS Shapes如circle()、ellipse(), inset()或自由變化的polygon()應用於任何元素。元素中不在形狀邊界內的任何內容都將被裁剪刪除掉。

使用多邊形函數，咱們能夠建立三角形、星形或其餘形狀，雖然在可使用px等固定單位，但百分比將提供更大的靈活性並自適應於元素的尺寸。

因此對於一個八邊形，咱們能夠設置八組x，y點座標來定義。在這種狀況下，對於第一個x，咱們從盒子寬度的30%開始，對於y，咱們從盒子的頂部開始，而後順時針設置各個點。可見區域就是經過將這些點用直線鏈接而造成的形狀。

clip-path: polygon(
 30% 0%,
 70% 0%,
 100% 30%,
 100% 70%,
 70% 100%,
 30% 100%,
 0% 70%,
 0% 30%
);複製代碼

看不見的頂點

上面實現一個八邊形，咱們設置了八個點的座標。可是，咱們能夠跳出元素框的限制去思考，也就是說要跳出0% - 100%的這個範圍。

元素的盒邊框是裁剪後內容的顯示邊界，但咱們仍然能夠爲元素定義超出盒邊框的點。

經過定義超過0%-100%範圍的點，咱們能夠把一個有三個點的多邊形變成四邊形、五邊形或六邊形。在這個例子中，都是定義clip-path: polygon()函數的三個點，可是因爲超出了元素框的邊界，咱們能夠看到一個三角形和兩個五邊形。

因而，上面的八邊形只用四個點就能夠實現。

一條裁剪路徑，多個形狀

咱們能夠利用超出元素邊界的這種能力用一個polygon()建立多個裁剪形狀。

根據元素的位置，咱們能夠直接製做出每一個形狀，可是由於咱們知道裁剪座標點能夠在元素框以外的空間中移動，因此能夠繪製額外的線來幫助咱們找到下一個點的位置。

它還能夠幫助咱們分割元素。結合CSS自定義屬性，咱們能夠處理重疊的元素，並將每一個元素裁剪成交替的條帶。下面的例子是兩個重疊的圓角矩形，每一個被分紅不規則的矩形動畫。

不一樣的填充規則不一樣的形狀

polygon()函數不只僅是一組座標點的集合，它還有另外的一個參數 — 填充規則 ，咱們一直使用的默認值是nonzero，它還有另一個值是evenodd，這兩個值它們肯定形狀的內部和外部的規則是不一樣的。

當使用evenodd規則時，咱們能夠經過從任意的點繪製光線來肯定點是在邊界內仍是在邊界外。若是光線穿過裁剪路徑線的和爲偶數，則該點被視爲外部，若是光線穿過裁剪路徑線的和爲奇數，則該點位於內部。

順序

要注意的是，有許多CSS屬性例如CSS Filters, Blend Modes等都會影響元素的外觀。而這些效果會按下面的順序應用到元素上：

1. CSS Filters (例如 filter: blur(2px))
2. Clipping (本文所講的)
3. Masking (相似與裁剪)
4. Blend Modes (例如 mix-blend-mode: multiply)
5. Opacity

若是咱們須要一個模糊的星星形狀，模糊效果會發生在裁剪以前。因爲模糊效果會參照元素的邊框，可是咱們將元素邊框裁剪掉了，因而前一個星星的模糊效果會丟失。

若是咱們想模糊星星，能夠選擇將剪裁後的元素包裹在模糊的父元素中。內部元素將首先呈現其星星的形狀，而後父元素將正常模糊其內容。

經過動畫來顯示內容

CSS Shapes是能夠添加動畫效果的，它容許咱們在不影響元素內容的狀況下改變元素的可視區域。例如，咱們能夠從內容隱藏（徹底裁剪）開始，並增大裁剪路徑以顯示其中的內容。要注意的是，clip-path: polygon()動畫形的一個重要條件是每一個關鍵幀的座標點數以及填充規則都必須相同。不然，瀏覽器將沒有足夠的信息來插入中間值。

總結

Clip paths給咱們提供了一些新的有趣的可能，同時clip-path屬性並不會改變元素自己的尺寸和佈局，這也是它強大的地方，咱們能夠大量的使用這個屬性來改變元素的外觀。

獲取以上效果的所有源碼能夠：