了解CSS属性：clip-path

clip-path 是工作草案的一部分，它是一个通过屏蔽和裁减来隐藏元素的一部分的工具。尽管clip-path没有被主流的浏览器支持（包括IE和Firefox），但在webkit浏览器中，它仍然是一个实现时尚效果的小工具。

注意，在现代浏览器中需要使用-webkit-前缀。

clip-path 简单的工作原理是提供一系列的X和Y值来创建路径。当使用这些值创建一条完整路径时，就会把图像按照路径内部的尺寸进行裁剪。

利用clip-path，我们可以创建圆形、椭圆和多边形等不同的形状，创造力是唯一的限制。


对元素简单地运用clip-path就能实现上面的效果：

CSS Code复制内容到剪贴板
  1. .clipClass {   
  2.   -webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);   
  3. }  

逐步分析

很像定位属性，我们需要考虑X值和Y值。X:0和Y:0表示从元素的左上角开始，并从左上角开始移动。X:100%指的是元素右边，Y:100%指的是元素底部。
对于上面创建的路径，实际是创建了如下的点：

为了创建圆形，需要给circle传入三个值：圆心的坐标（X值和Y值）以及半径。当定义圆的半径时，我们可以用at关键字来定义圆心坐标。

CSS Code复制内容到剪贴板
  1. .clipClass {   
  2.   -webkit-clip-path: circle(50% at 50% 50%);   
  3. }  

椭圆

很多时候，你不需要一个简单的圆，而是一个椭圆。

为了实现椭圆，需要给ellipse提供4个值：椭圆的x轴半径、y轴半径、定位椭圆位置的x坐标和y坐标，后面两个值用at关键字和前面两个值分开。

CSS Code复制内容到剪贴板
  1. .clipClass {   
  2.   -webkit-clip-path: ellipse(30% 20% at 50% 50%);   
  3. }