IT工程師數位筆記本

‘clip-path’是css3的一個強大屬性，我們可以利用它來繪制各種各樣的圖形，當然不只是這些，接下來一起看看它的強大功能吧。

首先介紹的是clip-path里面的polygon功能，我們可以通過它來繪制多邊形。

先來裁剪一個三角形。

代碼如下：

<style>
   div{
    width:100px;
    height:100px;
    background-color:red;
    -webkit-clip-path:polygon(50% 0px,100% 100%,0px 100%);
   }
</style>

<div></div>

解釋一下代碼，polygon里面第一個坐標為X方向，第二個為Y方向，這里我們寫的X是50%，Y是0px，也就是說我從這個元素的寬50%開始到高0px裁剪。接著從這個點往下裁剪。也就是PS里面的選區，區域外面的將會被裁剪掉。

就像這樣，畫的有點丑哈。

因為三角形的話，只要確定三個角就可以了。

另外被裁剪掉的部分不會響應事件。

繪制一個菱形，這是菱形嗎？暫且這樣叫吧

代碼如下：

<style>
   div{
    width:100px;
    height:100px;
    background-color:red;
    -webkit-clip-path:polygon(0px 50%,50% 0px,100% 50%,50%
 100%,0px 50%);
   }
</style>
<div></div>

平行四邊形

代碼：

<style>
   div{
    width:100px;
    height:100px;
    background-color:red;
    -webkit-clip-path:polygon(0% 60%,20% 0%,60% 0%,40% 60%
,0% 60%);
   }
</style>
<div></div>

簡直太強大了，有此神器，解決了好多問題，其他圖形這里就不再一一演示了。

下面介紹一個傻瓜式工具，來幫我們裁剪。
chrome神器插件下載
注意得再服務器里面才能使用，這里我用sublimeServer插件。

接著我們把它的代碼復制下來就行了，簡單吧。