240 阿裏雲技術社區[雲棲]

不可思議的CSS之CLIP-PATH

曾經和某位朋友在聊天中討論過這樣一個話題：綜合90%的網站的布局以及頁麵中的元素不是方的，就是圓的。就像所有的顏色都是由三原色（RGB）構成的一樣，所有規則的形狀似乎也都是由方和圓組成的；拋開設計效果的好看與否不說，似乎不規則的設計在實現（CSS）成本上也是一個麻煩，畢竟在CSS3之前，我們實現一個圓都要切圖，更何況那些複雜的多邊形。好在CSS3時代的到來，尤其是CSS3在借鑒並增加了眾多SVG屬性的今天，使用純CSS繪製一個多邊形已經不再是什麼難事。文章中要介紹的clip-path這個屬性也是一個借鑒了SVG的clipPath的借鑒品（確切的說應該是css clip屬性（已被廢棄）的替代品，svg clip-path屬性的延伸品）。

CLIP-PATH介紹

clip-path 直譯過來就是裁剪路徑，使用SVG或形狀定義一個HTML元素的可見區域的方法。想象一下你在Photoshop中勾勒路徑的場景。MDN上是這樣介紹clip-path的：

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

文字過於苦澀，直接來看看效果：

效果演示

截圖基於clip-path在線神器 - https://bennettfeely.com/clippy 。一個用來生成各種形狀（包括隨意拖拉自定義）並且可以直接生成代碼的網站。博客前端WEB圈頁麵banner上的形狀就直接使用該網站生成。

css clip-path 效果演示

效果雖然吊炸天，兼容性卻是個問題。

兼容性

clip-path目前兼容性較差，IE和Edge直接不支持，考慮兼容性的同學可以暫時等等。由於瀏覽器更新換代太快，很難說一段時間後clip-path的兼容性又是如何，因此這裏不再截圖，可以直接點擊這裏來查看。

基本語法

<clip-source> | [ <basic-shape> || <geometry-box> ] | none

/*屬性說明*/
<clip-source> = <url>
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()>
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box

語法詳解和示例

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

同時，文章底部有demo可運行查看具體效果。透明區域表示被裁剪的區域

基本圖形：inset

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

//語法
inset( <length-percentage>{1,4} [ round <border-radius> ]? )
//說明
inset()可以傳入5個參數，分別對應top,right,bottom,left的裁剪位置,round radius（可選，圓角）

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

clip-path：inset

基本圖形：circle

circle() : 定義一個圓。

//語法
circle( [ <shape-radius> ]? [ at <position> ]? )
//說明
circle()可以傳人2個可選參數；
1. 圓的半徑，默認元素寬高中短的那個為直徑，支持百分比
2. 圓心位置，默認為元素中心點
//半徑公式
如果半徑使用百分比：圓的半徑 = (sqrt(width^2+height^2)/sqrt(2)) * 百分比 

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

clip-path：circle

基本圖形：ellipse

ellipse() : 定義一個橢圓。

//語法
ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
//說明
ellipse()可以傳人3個可選參數；
1. 橢圓的X軸半徑，默認是寬度的一半，支持百分比
2. 橢圓的Y軸半徑，默認是高度的一半，支持百分比
3. 橢圓中心位置，默認是元素的中心點

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

clip-path：ellipse

基本圖形：polygon

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

//語法
polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )
//說明
<fill-rule>可選，表示填充規則用來確定該多邊形的內部。可能的值有nonzero和evenodd,默認值是nonzero
後麵的每對參數表示多邊形的頂點坐標（X,Y），也就是連接點

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

clip-path：polygon

使用DEMO浪起來

如果無法顯示，請自備梯子，你懂得~

Run 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

Run demo

其他屬性

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

總結

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

參考

最後更新：2017-11-03 10:34:15