CSS3:clip-path具體解釋

依據她的以往經驗，這個站點的<code>HTML</code>和<code>CSS</code>是全然在她的能力範圍以内，于是我幫助她完畢了這個效果。顯示<code>nav</code>被裁減的效果是一個不簡單的任務，我看到圖檔的第一反應是建立一個相比對的背景被部分裁剪的圖像。然後把它設定為一個<code>after</code>元素。

問題是，至少要解決響應式問題，而且響應式并不全然可控的。

<code>clip-path</code> 是工作草案的一部分。它是一個通過屏蔽和裁減來隐藏元素的一部分的工具。雖然<code>clip-path</code>沒有被主流的浏覽器支援（包含IE和Firefox），但在<code>webkit</code>浏覽器中，它仍然是一個實作時尚效果的小工具。

注意，在現代浏覽器中須要使用<code>-webkit-</code>字首。

<code>clip-path</code> 簡單的工作原理是提供一系列的<code>X</code>和<code>Y</code>值來建立路徑。

當使用這些值建立一條完整路徑時，就會把圖像依照路徑内部的尺寸進行裁剪。

利用<code>clip-path</code>，我們能夠建立圓形、橢圓和多邊形等不同的形狀，創造力是唯一的限制。

對元素簡單地運用<code>clip-path</code>就能實作上面的效果：

非常像定位屬性，我們須要考慮<code>X</code>值和<code>Y</code>值。

<code>X:0</code>和<code>Y:0</code>表示從元素的左上角開始。并從左上角開始移動。

<code>X:100%</code>指的是元素右邊，<code>Y:100%</code>指的是元素底部。 

對于上面建立的路徑，實際是建立了例如以下的點：

這個簡單路徑開始于左下角，水準移動50%，并到達頂部位置，然後又水準移動到100%的位置，垂直向下回究竟部，到達第三個坐标點。三角形就出來了。

在上面的示範樣例中，我們使用<code>polygon</code>來建立一個圖形，并通過多對用逗号（<code>,</code>）分開的<code>X</code>值和<code>Y</code>值定義了一個路徑。然後。我們能夠通過取不同的值來建立不同的圖形。

為了建立圓形。須要給<code>circle</code>傳入三個值：圓心的坐标（X值和Y值）以及半徑。

當定義圓的半徑時。我們能夠用<code>at</code>關鍵字來定義圓心坐标。

非常多時候，你不須要一個簡單的圓，而是一個橢圓。

為了實作橢圓。須要給<code>ellipse</code>提供4個值：橢圓的<code>x</code>軸半徑、<code>y</code>軸半徑、定位橢圓位置的<code>x</code>坐标和<code>y</code>坐标，後面兩個值用<code>at</code>關鍵字和前面兩個值分開。

(在老版本号的chrome中有錯誤) 

由于多邊形邊緣銳利，是以它可能不是你想要的東西，你想建立的是圓角矩形，是以我們來看看Inset的值。Inset使用四個值（相應“上 右 下 左”的順序）來設定圓角半徑。

上面的各個值分别相應為：

其簡寫形式：

Circle: circle(radius at x-axis y-axis)

Ellipse: ellipse(x-rad y-rad at x-axis y-axis)

Polygon: polygon(x-axis y-axis, x-axis y-axis, … )

Inset: inset(top right bottom left round top-radius right-radius bottom-radius left-radius)

正如你看到的，原型和圓角圖形被少數幾個值限制了,因而<code>Polygons</code>是建立複雜圖形的最好選擇。

<code>Polygons</code>能定義多組點，同意我們用各種方式去裁圖形。

<a href="http://codepen.io/drewminns/pen/WbXzbb">View the code on codepen</a>

<a href="http://codepen.io/drewminns/pen/zxPWxd">View the code on codepen</a>

如今我們已經了解了各種圖形和怎麼建立它們，那怎麼利用這些圖形建立我們想要的效果呢？ 

給形狀應用一個<code>hover</code>，并用過渡屬性來建立平滑的效果。

可是須要記住。我們建立的初始預設狀态，必須同全部的<code>hover</code>狀态都使用同樣的坐标系。 

<a href="http://codepen.io/drewminns/pen/VYrXvG">View the code on codepen</a>

本文轉自mfrbuaa部落格園部落格，原文連結：http://www.cnblogs.com/mfrbuaa/p/5337949.html，如需轉載請自行聯系原作者