摘要：一個(gè)用來(lái)生成各種形狀包括隨意拖拉自定義并且可以直接生成代碼的網(wǎng)站。兼容性目前兼容性較差，和直接不支持，考慮兼容性的同學(xué)可以暫時(shí)等等。透明區(qū)域表示被裁剪的區(qū)域基本圖形定義一個(gè)矩形。語(yǔ)法說(shuō)明可選，表示填充規(guī)則用來(lái)確定該多邊形的內(nèi)部。

本文首發(fā)于 我的博客

曾經(jīng)和某位朋友在聊天中討論過(guò)這樣一個(gè)話題：綜合90%的網(wǎng)站的布局以及頁(yè)面中的元素不是方的，就是圓的。就像所有的顏色都是由三原色（RGB）構(gòu)成的一樣，所有規(guī)則的形狀似乎也都是由方和圓組成的；拋開(kāi)設(shè)計(jì)效果的好看與否不說(shuō)，似乎不規(guī)則的設(shè)計(jì)在實(shí)現(xiàn)（CSS）成本上也是一個(gè)麻煩，畢竟在CSS3之前，我們實(shí)現(xiàn)一個(gè)圓都要切圖，更何況那些復(fù)雜的多邊形。好在CSS3時(shí)代的到來(lái)，尤其是CSS3在借鑒并增加了眾多SVG屬性的今天，使用純CSS繪制一個(gè)多邊形已經(jīng)不再是什么難事。文章中要介紹的clip-path這個(gè)屬性也是一個(gè)借鑒了SVG的clipPath的借鑒品（確切的說(shuō)應(yīng)該是css clip屬性（已被廢棄）的替代品，svg clip-path屬性的延伸品?）。

clip-path 直譯過(guò)來(lái)就是裁剪路徑，使用SVG或形狀定義一個(gè)HTML元素的可見(jiàn)區(qū)域的方法。想象一下你在Photoshop中勾勒路徑的場(chǎng)景。MDN上是這樣介紹 clip-path的：

clip-path屬性可以防止部分元素通過(guò)定義的剪切區(qū)域來(lái)顯示，僅通過(guò)顯示的特殊區(qū)域。剪切區(qū)域是被URL定義的路徑代替行內(nèi)或者外部svg，或者定義路線的方法例如circle().。clip-path屬性代替了現(xiàn)在已經(jīng)棄用的剪切 clip屬性。

文字過(guò)于苦澀，直接來(lái)看看效果：

截圖基于clip-path在線神器 - http://bennettfeely.com/clippy 。一個(gè)用來(lái)生成各種形狀（包括隨意拖拉自定義）并且可以直接生成代碼的網(wǎng)站。 博客 前端WEB圈 頁(yè)面banner上的形狀就直接使用該網(wǎng)站生成。

效果雖然吊炸天，兼容性卻是個(gè)問(wèn)題。

clip-path目前兼容性較差，IE和Edge直接不支持，考慮兼容性的同學(xué)可以暫時(shí)等等?。由于瀏覽器更新?lián)Q代太快，很難說(shuō)一段時(shí)間后clip-path的兼容性又是如何，因此這里不再截圖，可以直接點(diǎn)擊這里來(lái)查看。

 | [  ||  ] | none

/*屬性說(shuō)明*/
 = 
 =  |  |  | 
 =  | fill-box | stroke-box | view-box

為了更明顯的表示裁剪區(qū)域，我給每個(gè)demo添加了同樣寬高的透明背景，其中色塊表示被裁剪后的部分，透明背景表示被裁剪的區(qū)域。

同時(shí)，文章底部有demo可運(yùn)行查看具體效果。透明區(qū)域表示被裁剪的區(qū)域

inset() : 定義一個(gè)矩形 。注意，定義矩形不是rect，而是 inset。

//語(yǔ)法
inset( {1,4} [ round  ]? )
//說(shuō)明
inset()可以傳入5個(gè)參數(shù)，分別對(duì)應(yīng)top,right,bottom,left的裁剪位置,round radius（可選，圓角）

//示例
clip-path: inset(2em 3em 2em 1em round 2em);

circle() : 定義一個(gè)圓 。

//語(yǔ)法
circle( [  ]? [ at  ]? )
//說(shuō)明
circle()可以傳人2個(gè)可選參數(shù)；
1. 圓的半徑，默認(rèn)元素寬高中短的那個(gè)為直徑，支持百分比
2. 圓心位置，默認(rèn)為元素中心點(diǎn)
//半徑公式
如果半徑使用百分比：圓的半徑 = (sqrt(width^2+height^2)/sqrt(2)) * 百分比 

//示例
clip-path: circle(30% at 150px 120px);

ellipse() : 定義一個(gè)橢圓 。

//語(yǔ)法
ellipse( [ {2} ]? [ at  ]? )
//說(shuō)明
ellipse()可以傳人3個(gè)可選參數(shù)；
1. 橢圓的X軸半徑，默認(rèn)是寬度的一半，支持百分比
2. 橢圓的Y軸半徑，默認(rèn)是高度的一半，支持百分比
3. 橢圓中心位置，默認(rèn)是元素的中心點(diǎn)

//示例
clip-path: ellipse(45% 30% at 50% 50%);

polygon() : 定義一個(gè)多邊形 。

//語(yǔ)法
polygon( ? , [   ]# )
//說(shuō)明
可選，表示填充規(guī)則用來(lái)確定該多邊形的內(nèi)部?？赡艿闹涤衝onzero和evenodd,默認(rèn)值是nonzero
后面的每對(duì)參數(shù)表示多邊形的頂點(diǎn)坐標(biāo)（X,Y），也就是連接點(diǎn)

//示例
clip-path: polygon(50% 0,100% 50%,0 100%);

如果無(wú)法顯示，請(qǐng)自備梯子?，你懂得~??

如上知識(shí)點(diǎn)再加上CSS3的animation動(dòng)畫(huà)和linear-gradient漸變屬性，就可以完成 前端WEB圈 頁(yè)面上的多形狀動(dòng)畫(huà)Banner效果：

.shape1 {
  background-image: linear-gradient(to bottom right, #183de7, #48cffe 80%);
  clip-path: inset(0 0 0 0 round 100px);
}
.shape2 {
  clip-path: inset(0 0 0 0 round 100px);
  background-image: linear-gradient(to bottom right, #183de7, #48cffe 80%);
  transform: rotate(45deg);
}
.shape3 {
  width: 960px;
  height: 960px;
  border-radius: 50%/100% 0;
  background: #00ffff;
}
.shape4,.shape5 {
  clip-path: circle();
  background-image: linear-gradient(to right, #0db54c, #00697b 40%);
}
.shape6 {
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  background-image: linear-gradient(to right, #f76b71, #a41058 60%);
}

除了 inset, circle等 basic-shape屬性外，clip-path還具有url, geometry-box等屬性值，具體可以參考MDN上的介紹。

在clip-path之前，我們可以利用盒模型，利用border-radius, border，transform，box-shadow等來(lái)創(chuàng)建諸如矩形，圓形，橢圓，三角形等一些簡(jiǎn)單的形狀，clip-path為我們提供了多邊形的創(chuàng)建方案，盡管它現(xiàn)在的支持性，兼容性還不是很好，但我們完全可以在一些特定的場(chǎng)景下使用它來(lái)代替圖片了。當(dāng)然，clip-path的作用不僅僅是如我上面介紹的那般簡(jiǎn)單，她還有很多奇妙的用處，尤其是配合動(dòng)畫(huà)一起使用，感興趣的同學(xué)可以深入之……

https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path

https://caniuse.com/#search=clip-path

http://bennettfeely.com/clippy/

本文首發(fā)于 我的博客