之前提到的绘制正多边形的方法纯粹是使用伪元素，不过说白了，还有一种方法可以让单个div变成更多的形状转换，这个方法就是“clip”-path”的CSS3，这个“clip-path”看起来有点眼熟，因为它本来就存在于SVG中，用mask（切割）的方法连接坐标绘制mask区域，可以做出很多不同的形状，让背景色或底图出现，随着浏览器对CSS3支持的大大提高，自然要用它来做一些有特色的改变。这个属性的应用最早是在使用clip-pathsuper的网站上看到的，是从这个网站上看到的：http://species-in-pieces.com/，不得不说这个网站真的很牛逼。第一眼看到的时候真的以为是用SVG做的，没想到竟然是用CSS雕刻的……太神奇了！然后在找资料的过程中，找到了一个很给力的网站：http://bennettfeely.com/clippy/，里面专门介绍了CSS3属性“clip-path”。除了曲线，几乎可以做任何形状（镂空部分需要组合）。使用clip-path绘制多边形如果不考虑一些浏览器支持的问题，使用clip-path绘制多边形比使用伪元素要好得多制作多边形也容易很多，也可以单独绘制超过八边形的div。使用伪元素的绘图是直接从长宽开始的，而使用clip-path是从每个点的坐标开始的，因为是坐标点，很多基本的三角函数也是用来计算坐标的，以便于做一个正多边形。下面使用clip-path绘制圆形、椭圆和正多边形给大家看看。在开始画之前，有两点需要注意：使用clip-path从同一个方向画，顺时针画就一直顺时针，逆时针画就一直逆时针，因为多边形是一条连续的线段，如果线段相交，就会减去面积（当然，如果这是你想要的效果，无所谓）。如果在绘图时使用“比例”方式，则必须事先设置好长宽，否则绘制出来的长宽可能与我们的想象有差距，而使用“像素”方式绘图则不存在该问题。Circularcircle(圆心坐标处的半径).circle{width:100px;高度：100px；背景：#0cc；-webkit-clip-path:circle(50%at50%50%);}ellipse(long,Minoraxisradiusatcentercoordinates).ellipse{width:100px;高度：100px；背景：#aaa;-webkit-clip-path:ellipse(25%50%at50%50%);}内置矩形插图（右上左下边距圆上右下左角）.inset{width:100px;高度：100px；背景：#99f；-webkit-clip-path:inset(10px20px30px10pxround20px5px50px0);}正三角形.a{width:100px;高度：87px；背景：#c00；-webkit-clip-path:polygon(0%100%,50%0%,100%100%);}square.b{宽度：100px；高度：100px；背景：#069；-webkit-剪辑路径：多边形（0%0%，0%100%，100%100%，100%0%）；}regularpentagonregularpentagon是时候计算了，59/(59+95)=38.31%,31/(81*2)=19.14%.c{width:162px;高度：154px；背景：#095；-webkit-clip-path:多边形(0%38.31%,50%0%,100%38.31%,80.86%100%,19.14%100%);}正六边形正六边形的计算比较简单，50/(100+502)=25%,150/(100+502)=75%.d{width:200px;高度：174px；背景：#f80;-webkit-剪辑路径：多边形（25%0%，75%0%，100%50%，75%100%，25%100%，0%50%）；}正七边形多边形是这里计算最多的形状，22/(100+622)=10.09%,202/(100+622)=90.18%,43/(43+97+78)=19.72%,(43+97)/(43+97+78)=64.22%,62/(100+622)=27.68%,(100+62)/(100+622)=72.32%.e{width:224px;高度：218px；背景：#09c；-webkit-clip-path:polygon(50%0%,90.18%19.72%,100%64.22%,72.32%100%,27.68%100%,0%64.22%,10.09%19.72%);}正八边形计算如下，71/(100+712)=29.34%，(71+100)/(100+712)=70.66%.f{width:242px;高度：242px；背景：#f69;-webkit-clip-path:polygon(29.34%0%,70.66%0%,100%29.34%,100%70.66%,70.66%100%,29.34%100%,0%70.66%,0%29.34%);}用clip-path做动画熟练了clip-path之后，当然要用它来做一些动画了。这里有两个例子。第一种是正多边形的变换，第二种是三角形的变换组合。看似很简单，但是在实际制作中，必须要考虑到每个点的坐标。为了避免形状“翻转”的错觉，形状中的每个点在移动时尽量不要错开，因为只有一个错开，就会出现相交的空白，会出现不自然或翻转的现象！当然，如果你想有翻转的效果，就应该让它们错开！正多边形的变换三角形的变换组合需要上面两个动画的代码，可以加我：
