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