css3 图片裁剪菱形,利用CSS3 clip-path裁剪各种图形。
‘clip-path’是css3的一個強大屬性，我們可以利用它來繪制各種各樣的圖形，當然不只是這些，接下來一起看看它的強大功能吧。
首先介紹的是clip-path里面的polygon功能，我們可以通過它來繪制多邊形。
先來裁剪一個三角形。
代碼如下：
div{
width:100px;
height:100px;
background-color:red;
-webkit-clip-path:polygon(50% 0px,100% 100%,0px 100%);
}
解釋一下代碼，polygon里面第一個坐標為X方向，第二個為Y方向，這里我們寫的X是50%，Y是0px，也就是說我從這個元素的寬50%開始到高0px裁剪。接著從這個點往下裁剪。也就是PS里面的選區，區域外面的將會被裁剪掉。
就像這樣，畫的有點丑哈。
因為三角形的話，只要確定三個角就可以了。
另外被裁剪掉的部分不會響應事件。
繪制一個菱形，這是菱形嗎？暫且這樣叫吧
代碼如下：
div{
width:100px;
height:100px;
background-color:red;
-webkit-clip-path:polygon(0px 50%,50% 0px,100% 50%,50%
100%,0px 50%);
}
平行四邊形
代碼：
div{
width:100px;
height:100px;
background-color:red;
-webkit-clip-path:polygon(0% 60%,20% 0%,60% 0%,40% 60%
,0% 60%);
}
簡直太強大了，有此神器，解決了好多問題，其他圖形這里就不再一一演示了。
下面介紹一個傻瓜式工具，來幫我們裁剪。
chrome神器插件下載
注意得再服務器里面才能使用，這里我用sublimeServer插件。
接著我們把它的代碼復制下來就行了，簡單吧。
CSS3 clip裁剪動畫
CSS3 clip裁剪動畫 下面是比較簡單的例子
總結
以上是生活随笔為你收集整理的css3 图片裁剪菱形,利用CSS3 clip-path裁剪各种图形。的全部內容，希望文章能夠幫你解決所遇到的問題。
