发现一个很强的网站：bennettfeely.com/clippy/ （大概需要加速器），专门介绍「clip-path」这个CSS3的属性，你可以直接在上面拖拉或修改，除了贝兹曲线外，几乎任何形状都做得出来（中空的部分要用组合的）
如果不考虑一些浏览器支持度的问题，使用clip-path来绘制多边形，还比利用伪元素还制作多边形来得简单许多，而且也可以做到单一div绘制超过八边形，使用伪元素的绘制是直接从长宽着手，而利用clip-path则是要由每个点的坐标着手，因为是座标点的缘故，要做出正多边形就也同样要用到许多基本的三角函式来计算坐标，以下就利用clip-path来绘制圆形、椭圆和正多边形给大家看看。
开始绘制之前，有两点注意事项：
- 使用clip-path要从同一个方向绘制，如果顺时针绘制就一律顺时针，逆时针就一律逆时针，因为polygon是一个连续的线段，若线段彼此有交集，面积区域就会有相减的状况发生（当然如果这是你要的效果就无妨了）。
- 如果绘制时采用「比例」的方式绘制，长宽就必须要先行设定，不然有可能绘制出来的长宽和我们想像的就会有落差，使用「像素」绘制就没有这种问题。
圆形circle（半径at圆心坐标）
.circle{
width:100px;
height:100px;
background:#0cc;
-webkit-clip-path:circle(50% at 50% 50%);
}
椭圆形ellipse（长、短轴半径at圆心坐标）
.ellipse{
width:100px;
height:100px;
background:#aaa;
-webkit-clip-path:ellipse(25% 50% at 50% 50%);
}
内置矩形inset（上右下左的边距round上右下左圆角
.inset{
width:100px;
height:100px;
background:#99f;
-webkit-clip-path:inset(5% 10% 15% 20% round 20% 5% 50% 0);
}
正三角形
.a{
width:100px;
height:87px;
background:#c00;
-webkit-clip-path:polygon(0% 100%, 50% 0%,100% 100%);
}
正方形
.b{
width:100px;
height:100px;
background:#069;
-webkit-clip-path:polygon(0% 0%, 0% 100%,100% 100%,100% 0%);
}
正五边形
正五边形就要计算一下了，59/（59+95）=38.31%，31/（81*2）=19.14%
.c{
width:162px;
height:154px;
background:#095;
-webkit-clip-path:polygon(0% 38.31%, 50% 0%,100% 38.31%,80.86% 100%,19.14% 100%);
}
依此类推可以画很多图案
