摘要：一個用來生成各種形狀包括隨意拖拉自定義并且可以直接生成代碼的網(wǎng)站。兼容性目前兼容性較差，和直接不支持，考慮兼容性的同學可以暫時等等。透明區(qū)域表示被裁剪的區(qū)域基本圖形定義一個矩形。語法說明可選，表示填充規(guī)則用來確定該多邊形的內(nèi)部。
本文首發(fā)于 我的博客
曾經(jīng)和某位朋友在聊天中討論過這樣一個話題：綜合90%的網(wǎng)站的布局以及頁面中的元素不是方的，就是圓的。就像所有的顏色都是由三原色（RGB）構(gòu)成的一樣，所有規(guī)則的形狀似乎也都是由方和圓組成的；拋開設計效果的好看與否不說，似乎不規(guī)則的設計在實現(xiàn)（CSS）成本上也是一個麻煩，畢竟在CSS3之前，我們實現(xiàn)一個圓都要切圖，更何況那些復雜的多邊形。好在CSS3時代的到來，尤其是CSS3在借鑒并增加了眾多SVG屬性的今天，使用純CSS繪制一個多邊形已經(jīng)不再是什么難事。文章中要介紹的clip-path這個屬性也是一個借鑒了SVG的clipPath的借鑒品（確切的說應該是css clip屬性（已被廢棄）的替代品，svg clip-path屬性的延伸品?）。
clip-path介紹
clip-path 直譯過來就是裁剪路徑，使用SVG或形狀定義一個HTML元素的可見區(qū)域的方法。想象一下你在Photoshop中勾勒路徑的場景。MDN上是這樣介紹 clip-path的：
clip-path屬性可以防止部分元素通過定義的剪切區(qū)域來顯示，僅通過顯示的特殊區(qū)域。剪切區(qū)域是被URL定義的路徑代替行內(nèi)或者外部svg，或者定義路線的方法例如circle().。clip-path屬性代替了現(xiàn)在已經(jīng)棄用的剪切 clip屬性。
文字過于苦澀，直接來看看效果：
效果演示
截圖基于clip-path在線神器 - http://bennettfeely.com/clippy 。一個用來生成各種形狀（包括隨意拖拉自定義）并且可以直接生成代碼的網(wǎng)站。 博客 前端WEB圈 頁面banner上的形狀就直接使用該網(wǎng)站生成。
效果雖然吊炸天，兼容性卻是個問題。
兼容性
clip-path目前兼容性較差，IE和Edge直接不支持，考慮兼容性的同學可以暫時等等?。由于瀏覽器更新?lián)Q代太快，很難說一段時間后clip-path的兼容性又是如何，因此這里不再截圖，可以直接點擊這里來查看。
基本語法
| [ || ] | none
/*屬性說明*/
=
= | | |
= | fill-box | stroke-box | view-box
語法詳解和示例
為了更明顯的表示裁剪區(qū)域，我給每個demo添加了同樣寬高的透明背景，其中色塊表示被裁剪后的部分，透明背景表示被裁剪的區(qū)域。
同時，文章底部有demo可運行查看具體效果。透明區(qū)域表示被裁剪的區(qū)域
基本圖形：inset
inset() : 定義一個矩形 。注意，定義矩形不是rect，而是 inset。
//語法
inset( {1,4} [ round ]? )
//說明
inset()可以傳入5個參數(shù)，分別對應top,right,bottom,left的裁剪位置,round radius（可選，圓角）
//示例
clip-path: inset(2em 3em 2em 1em round 2em);
基本圖形：circle
circle() : 定義一個圓 。
//語法
circle( [ ]? [ at ]? )
//說明
circle()可以傳人2個可選參數(shù)；
1. 圓的半徑，默認元素寬高中短的那個為直徑，支持百分比
2. 圓心位置，默認為元素中心點
//半徑公式
如果半徑使用百分比：圓的半徑 = (sqrt(width^2+height^2)/sqrt(2)) * 百分比
//示例
clip-path: circle(30% at 150px 120px);
基本圖形：ellipse
ellipse() : 定義一個橢圓 。
//語法
ellipse( [ {2} ]? [ at ]? )
//說明
ellipse()可以傳人3個可選參數(shù)；
1. 橢圓的X軸半徑，默認是寬度的一半，支持百分比
2. 橢圓的Y軸半徑，默認是高度的一半，支持百分比
3. 橢圓中心位置，默認是元素的中心點
//示例
clip-path: ellipse(45% 30% at 50% 50%);
基本圖形：polygon
polygon() : 定義一個多邊形 。
//語法
polygon( ? , [ ]# )
//說明
可選，表示填充規(guī)則用來確定該多邊形的內(nèi)部。可能的值有nonzero和evenodd,默認值是nonzero
后面的每對參數(shù)表示多邊形的頂點坐標（X,Y），也就是連接點
//示例
clip-path: polygon(50% 0,100% 50%,0 100%);
使用demo浪起來
如果無法顯示，請自備梯子?，你懂得~??
clip-path-demo
綜合實例
如上知識點再加上CSS3的animation動畫和linear-gradient漸變屬性，就可以完成 前端WEB圈 頁面上的多形狀動畫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%);
}
在線DEMO
clip-path-animation
其他屬性
除了 inset, circle等 basic-shape屬性外，clip-path還具有url, geometry-box等屬性值，具體可以參考MDN上的介紹。
總結(jié)
在clip-path之前，我們可以利用盒模型，利用border-radius, border，transform，box-shadow等來創(chuàng)建諸如矩形，圓形，橢圓，三角形等一些簡單的形狀，clip-path為我們提供了多邊形的創(chuàng)建方案，盡管它現(xiàn)在的支持性，兼容性還不是很好，但我們完全可以在一些特定的場景下使用它來代替圖片了。當然，clip-path的作用不僅僅是如我上面介紹的那般簡單，她還有很多奇妙的用處，尤其是配合動畫一起使用，感興趣的同學可以深入之……
參考
https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path
https://caniuse.com/#search=clip-path
http://bennettfeely.com/clippy/
本文首發(fā)于 我的博客
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/112498.html
