css3的clip-path方法剪裁实现（三角形，多边形，圆，椭圆）

本例讲解如何通过clip-path把一个div（元素，可以是图片等）裁切成不同的形状，这里以一个div为例宽高均为300px

注意：不支持IE和Firefox，支持webkit浏览器，在现代浏览器中需要使用-webkit-前缀。

 

## 注意 clip-path 从右上开始顺时针旋转切割 

 

  1. <div class="demo" style="width: 300px; height: 300px; margin: auto; background: red;">

  2. </div>

1.裁切为一个三角形或者梯形 使用：polygon裁剪多边形。

 

  1. .demo{

  2. -webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);

  3. }

剪切梯形：坐标顺序为，右上、右下，左下，左上

 

  1. .demo{

  2. -webkit-clip-path: polygon(100% 0,75% 100%, 25% 100%, 0 0);

  3. }

2.裁切圆 ：创建圆形，需要给circle传入三个值：半径和圆心坐标（x y），用at关键字来定义圆心坐标。

 

  1. .demo{

  2. -webkit-clip-path: circle(50% at 50% 50%);

  3. }

3.裁切椭圆：创建椭圆，需要给ellipse传入四个值：椭圆的x轴半径、y轴半径以及椭圆圆心(x y)。

 

  1. .demo{

  2. -webkit-clip-path: ellipse(30% 20% at 50% 50%);

  3. }

4.再说下裁切的：矩形裁切，边缘裁切用到的 inset（对应的是距上，距右，距下，距左的位置）

 

  1. .demo{

  2. -webkit-clip-path: inset(100px 50px 50px 50px);

  3. }

 

小实例：裁切一个圆角 inset(<top> <right> <bottom> <left> round <top-radius> <right-radius><bottom-radius> <left-radius>)

-webkit-clip-path: inset(25% 0 round 0 25%);