简介

clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径，或者作为一个形状。clip-path属性代替了现在已经弃用的剪切 clip 属性。

基本语法

clip-source | basic-shape | geometry-box | none

属性说明

clip-source =url
basic-shape = inset | circle | ellipse | polygon
geometry-box = shape-box | fill-box | stroke-box | view-box

语法详解

基本图形：inset

inset() : 定义一个矩形 。注意，定义矩形不是rect，而是 inset。

//语法
inset( {1,4} [ round ]? ) //说明
inset()可以传入5个参数，分别对应top,right,bottom,left的裁剪位置,round radius（可选，圆角）

//示例

.inset{
  width:100px;  
  height: 100px;  
  background:rgb(43, 160, 214);  
  -webkit-clip-path: inset(5% 20% 15% 10%  round 20px);  
}

基本图形：circle

**circle(): 定义一个圆 **
//语法
circle( [ ] [ at ] ) //说明 circle()可以传人2个可选参数；

1. 圆的半径，默认元素宽高中短的那个为直径，支持百分比
2. 圆心位置，默认为元素中心点 //示例

.circle{
  width:100px;
  height: 100px;
  background:rgb(43, 160, 214);
  clip-path: circle(30% at 50px 50px);
}

基本图形：ellipse

ellipse() : 定义一个椭圆 。

//语法 ellipse( [ {2} ] [ at ] ) //说明 ellipse()可以传人3个可选参数；

1. 椭圆的X轴半径，默认是宽度的一半，支持百分比
2. 椭圆的Y轴半径，默认是高度的一半，支持百分比
3. 椭圆中心位置，默认是元素的中心点

//示例

.ellipse{
   width:100px;
   height: 100px;
   background:rgb(43, 160, 214);
   clip-path: ellipse(30% 45% at 50% 50%);

}

基本图形：polygon

polygon() : 定义一个多边形 。

//语法
polygon( )
//说明
可选，表示填充规则用来确定该多边形的内部。可能的值有nonzero和evenodd,默认值是nonzero 后面的每对参数表示多边形的顶点坐标（X,Y），也就是连接点

//示例

  .polygon {
     width: 100px;
     height: 100px;
     background: rgb(43, 160, 214);
     -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

菱形

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

梯形

-webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);

平行四边形

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

右箭头

-webkit-clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%)

五角星

-webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);

**来个大招 **