根據(jù)她的以往經(jīng)驗(yàn)，這個(gè)網(wǎng)站的HTML和CSS是完全在她的能力范圍以內(nèi)，于是我?guī)椭瓿闪诉@個(gè)效果。顯示nav被裁減的效果是一個(gè)不簡(jiǎn)單的任務(wù)，我看到圖片的第一反應(yīng)是創(chuàng)建一個(gè)相匹配的背景被部分裁剪的圖像，然后把它設(shè)置為一個(gè)after元素。問(wèn)題是，至少要解決響應(yīng)式問(wèn)題，并且響應(yīng)式并不完全可控的。
了解CSS屬性：clip-path
clip-path 是工作草案的一部分，它是一個(gè)通過(guò)屏蔽和裁減來(lái)隱藏元素的一部分的工具。盡管clip-path沒(méi)有被主流的瀏覽器支持（包括IE和Firefox），但在webkit瀏覽器中，它仍然是一個(gè)實(shí)現(xiàn)時(shí)尚效果的小工具。
注意，在現(xiàn)代瀏覽器中需要使用-webkit-前綴。
clip-path 簡(jiǎn)單的工作原理是提供一系列的X和Y值來(lái)創(chuàng)建路徑。當(dāng)使用這些值創(chuàng)建一條完整路徑時(shí)，就會(huì)把圖像按照路徑內(nèi)部的尺寸進(jìn)行裁剪。
利用clip-path，我們可以創(chuàng)建圓形、橢圓和多邊形等不同的形狀，創(chuàng)造力是唯一的限制。
一個(gè)簡(jiǎn)單的三角形裁減
View the code on codepen
對(duì)元素簡(jiǎn)單地運(yùn)用clip-path就能實(shí)現(xiàn)上面的效果：
逐步分析
很像定位屬性，我們需要考慮X值和Y值。X:0和Y:0表示從元素的左上角開(kāi)始，并從左上角開(kāi)始移動(dòng)。X:100%指的是元素右邊，Y:100%指的是元素底部。
對(duì)于上面創(chuàng)建的路徑，實(shí)際是創(chuàng)建了如下的點(diǎn)：
這個(gè)簡(jiǎn)單路徑開(kāi)始于左下角，水平移動(dòng)50%，并到達(dá)頂部位置，然后又水平移動(dòng)到100%的位置，垂直向下回到底部，到達(dá)第三個(gè)坐標(biāo)點(diǎn)。三角形就出來(lái)了。
形狀
在上面的示例中，我們使用polygon來(lái)創(chuàng)建一個(gè)圖形，并通過(guò)多對(duì)用逗號(hào)（,）分開(kāi)的X值和Y值定義了一個(gè)路徑。然后，我們可以通過(guò)取不同的值來(lái)創(chuàng)建不同的圖形。
圓
View the code on codepen
為了創(chuàng)建圓形，需要給circle傳入三個(gè)值：圓心的坐標(biāo)（X值和Y值）以及半徑。當(dāng)定義圓的半徑時(shí)，我們可以用at關(guān)鍵字來(lái)定義圓心坐標(biāo)。
新聞熱點(diǎn)
疑難解答
圖片精選
