利用CSS3 clip-path裁剪各種圖形

‘clip-path’是css3的一個強大屬性，我們可以利用它來繪制各種各樣的圖形

 

先來裁剪一個三角形

 

 

 代碼如下：

<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(0% 60%,20% 0%,60% 0%,40% 60%
,0% 60%);
   }
</style>
<div></div>

 

碼如下：

<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>

平行四邊形

 

 

 

 最后，介紹一個傻瓜式裁剪工具：https://www.cnblogs.com/pssp/p/5903018.html

 

本文原文作者：https://www.cnblogs.com/pssp/p/5903018.html