CSS沒(méi)有邊界的裁剪路徑 - Clip Paths

GitCafe 發(fā)布于2019-08-23 18:05 / 1894人閱讀

摘要：裁剪路徑可以將如或自由變化的應(yīng)用于任何元素。元素中不在形狀邊界內(nèi)的任何內(nèi)容都將被裁剪刪除掉。例如，我們可以從內(nèi)容隱藏完全裁剪開(kāi)始，并增大裁剪路徑以顯示其中的內(nèi)容。

隨著瀏覽器對(duì)shape-outside和clip-path等屬性的支持增加，CSS Shapes越來(lái)越受到關(guān)注。有幾種方法可以使用CSS Shapes，特別是clip-path屬性，乍一看我們并不知道這個(gè)屬性如何使用，下面就來(lái)詳細(xì)的介紹它。

裁剪路徑clip path的基礎(chǔ)知識(shí)

在深入研究之前，我們應(yīng)該先看看基本的形狀和clip-path。裁剪路徑可以將CSS Shapes如circle()、ellipse(), inset()或自由變化的polygon()應(yīng)用于任何元素。元素中不在形狀邊界內(nèi)的任何內(nèi)容都將被裁剪刪除掉。

使用多邊形函數(shù)，我們可以創(chuàng)建三角形、星形或其他形狀，雖然在可以使用px等固定單位，但百分比將提供更大的靈活性并自適應(yīng)于元素的尺寸。

所以對(duì)于一個(gè)八邊形，我們可以設(shè)置八組x，y點(diǎn)坐標(biāo)來(lái)定義。在這種情況下，對(duì)于第一個(gè)x，我們從盒子寬度的30%開(kāi)始，對(duì)于y，我們從盒子的頂部開(kāi)始，然后順時(shí)針設(shè)置各個(gè)點(diǎn)。可見(jiàn)區(qū)域就是通過(guò)將這些點(diǎn)用直線(xiàn)連接而形成的形狀。

clip-path: polygon(
  30% 0%,
  70% 0%,
  100% 30%,
  100% 70%,
  70% 100%,
  30% 100%,
  0% 70%,
  0% 30%
);

看不見(jiàn)的頂點(diǎn)

上面實(shí)現(xiàn)一個(gè)八邊形，我們?cè)O(shè)置了八個(gè)點(diǎn)的坐標(biāo)。但是，我們可以跳出元素框的限制去思考，也就是說(shuō)要跳出0% - 100%的這個(gè)范圍。

元素的盒邊框是裁剪后內(nèi)容的顯示邊界，但我們?nèi)匀豢梢詾樵囟x超出盒邊框的點(diǎn)。

通過(guò)定義超過(guò)0%-100%范圍的點(diǎn)，我們可以把一個(gè)有三個(gè)點(diǎn)的多邊形變成四邊形、五邊形或六邊形。在這個(gè)例子中，都是定義clip-path: polygon()函數(shù)的三個(gè)點(diǎn)，但是由于超出了元素框的邊界，我們可以看到一個(gè)三角形和兩個(gè)五邊形。

于是，上面的八邊形只用四個(gè)點(diǎn)就可以實(shí)現(xiàn)。

一條裁剪路徑，多個(gè)形狀

我們可以利用超出元素邊界的這種能力用一個(gè)polygon()創(chuàng)建多個(gè)裁剪形狀。

CSS源碼

根據(jù)元素的位置，我們可以直接制作出每個(gè)形狀，但是因?yàn)槲覀冎啦眉糇鴺?biāo)點(diǎn)可以在元素框之外的空間中移動(dòng)，所以可以繪制額外的線(xiàn)來(lái)幫助我們找到下一個(gè)點(diǎn)的位置。

它還可以幫助我們分割元素。結(jié)合CSS自定義屬性，我們可以處理重疊的元素，并將每個(gè)元素裁剪成交替的條帶。下面的例子是兩個(gè)重疊的圓角矩形，每個(gè)被分成不規(guī)則的矩形動(dòng)畫(huà)。

CSS源碼

不同的填充規(guī)則不同的形狀

polygon()函數(shù)不僅僅是一組坐標(biāo)點(diǎn)的集合，它還有另外的一個(gè)參數(shù) — 填充規(guī)則，我們一直使用的默認(rèn)值是nonzero，它還有另外一個(gè)值是evenodd，這兩個(gè)值它們確定形狀的內(nèi)部和外部的規(guī)則是不同的。

CSS源碼

當(dāng)使用evenodd規(guī)則時(shí)，我們可以通過(guò)從任意的點(diǎn)繪制光線(xiàn)來(lái)確定點(diǎn)是在邊界內(nèi)還是在邊界外。如果光線(xiàn)穿過(guò)裁剪路徑線(xiàn)的和為偶數(shù)，則該點(diǎn)被視為外部，如果光線(xiàn)穿過(guò)裁剪路徑線(xiàn)的和為奇數(shù)，則該點(diǎn)位于內(nèi)部。

順序

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

CSS Filters (例如 filter: blur(2px))

Clipping (本文所講的)

Masking (類(lèi)似與裁剪)

Blend Modes (例如 mix-blend-mode: multiply)

Opacity

如果我們需要一個(gè)模糊的星星形狀，模糊效果會(huì)發(fā)生在裁剪之前。由于模糊效果會(huì)參照元素的邊框，但是我們將元素邊框裁剪掉了，于是前一個(gè)星星的模糊效果會(huì)丟失。

CSS源碼

如果我們想模糊星星，可以選擇將剪裁后的元素包裹在模糊的父元素中。內(nèi)部元素將首先呈現(xiàn)其星星的形狀，然后父元素將正常模糊其內(nèi)容。

通過(guò)動(dòng)畫(huà)來(lái)顯示內(nèi)容

CSS Shapes是可以添加動(dòng)畫(huà)效果的，它允許我們?cè)诓挥绊懺貎?nèi)容的情況下改變?cè)氐目梢晠^(qū)域。例如，我們可以從內(nèi)容隱藏（完全裁剪）開(kāi)始，并增大裁剪路徑以顯示其中的內(nèi)容。要注意的是，clip-path: polygon()動(dòng)畫(huà)形的一個(gè)重要條件是每個(gè)關(guān)鍵幀的坐標(biāo)點(diǎn)數(shù)以及填充規(guī)則都必須相同。否則，瀏覽器將沒(méi)有足夠的信息來(lái)插入中間值。

CSS源碼

總結(jié)

Clip paths給我們提供了一些新的有趣的可能，同時(shí)clip-path屬性并不會(huì)改變?cè)乇旧淼某叽绾筒季郑@也是它強(qiáng)大的地方，我們可以大量的使用這個(gè)屬性來(lái)改變?cè)氐耐庥^。

獲取以上效果的全部源碼可以：