上一篇介绍了如何使用before和after伪元素制作MaterialDesign风格的按钮。其中的关键技术是利用border的宽高和div的body，所以这篇文章又增加了一个效果，就是纯粹用CSS把一个“单一”的div从一个正三角形变成了一个三角形正八边形（单个div最多只能是正八边形），最后再搭配动画效果成为正八边形。多边形的变换动画对于正多边形也需要大量的三角函数计算。为了方便，这里将正多边形的边统一设置为100px。等边三角形等边三角形不需要使用伪元素，只需要设置div本身的边框宽度就可以生成，先看等边三角形的边长和中线，如果边长是100px，则中心线四舍五入到87px(100xsin(60)=87)。因此，我们需要将div的长宽设置为0，然后设置下边框的宽度为87px，左右边框的宽度为50px（颜色设置为透明），然后我们可以组成漂亮的三角形。width:0;height:0;border-width:050px87px;border-style:solid;border-color:transparent透明#095;Square正方形应该是最简单的了，只要把长和宽设置成一样的值就可以了，不过其实还有另外两种方法。第一种方法可以设置长宽为0，也可以设置上下左右边框为50px。第二种方法是设置高度为0，宽度为100px。然后一个边宽也设置为100，这都是可以的。.a{width:100px;height:100px;background:#c00;}.b{width:0;height:0;border-width:50px;border-style:solid;border-color:#095;}.c{width:100px;height:0;border-width:00100px;border-style:solid;border-color:#069;}正五边形正五边形需要进入基本三角函数领域，让我们先分解一下正五边形，用原来的div做上三角，然后用一个伪元做下梯形，因为正五边形每条边的夹角是108度，所以用三角函数可以算出它的高度上三角59px（100xcos（54）），宽192px（100xsin（54）x2），下梯形高95px（100xsin（72）），宽长边和上面一样三角形也是192px。了解了原理之后，就可以使用伪元素一起来制作啦！.a{位置：相对；宽度：0；高度：0；边框宽度：081px59px；边框样式：实心；border-color:transparenttransparent#069;}.a:before{position:absolute;"";顶部：59px；左：-81px；宽度：100px；高度：0；背景：无；边框宽度：95px31px0；边框样式：实心；border-color:#069透明透明;正六边形的每个夹角都是120度。如果从纯CSS的方向看，可以把正五边形上面的三角形改成正六边形，也就是变成上下两个梯形。梯形的长边为200px(100xcos(60)x2+100)，梯形的高度为87px(100xsin(60))。所以只要稍微修改一下正五边形的CSS，就可以做出一个正六边形。.a{位置：相对；宽度：100px；高度：0；边框宽度：050px87px；边框样式：实心；border-color:transparenttransparent#f80;}.a:before{position:absolute;"";顶部：87px；左：-50px；宽度：100px；高度：0；背景：无；边框宽度：87px50px0；边框样式：实心；边框颜色：#f80透明透明；必须用after伪元素组成正七边形，因为正七边形必须拆成三个内存块，分别用原来的div做上三角，一个伪元素做中间的梯形，另一个伪元素元素用作底部的梯形。正七边形的夹角不是整数，而是128又4/7度。小数点后第二位大概是128.57，所以计算出来的结果如下图所示。关键是要清楚知道长度和宽度。一旦你有了长度和宽度，就开始用CSS编写吧！.a{位置：相对；宽度：0；高度：0；边框宽度：090px43px；边框样式：实心；border-color:transparenttransparent#09c;}.a:before{position:absolute;"";顶部：140px；左：-112px；宽度：100px；高度：0；边框宽度：78px62px0；边框样式：实心；边框颜色：#09c透明透明；}.a:after{位置：绝对；内容：””;顶部：43px；左：-112px；宽度：180px；高度：0；边框宽度：022px97px；背景：无；09c;}正八边形正八边形其实就是把正七边形上面的三角形变成梯形，再把中间的梯形变成长方形。正八边形的夹角是135度。计算出的每个区域的长宽如下图。同样理解原理，CSS做起来就简单多了！.a{位置：相对；宽度：100px；高度：0；边框宽度：071px71px；边框样式：实心；border-color:transparenttransparent#f69;}.a:before{position:absolute;"";顶部：171px；左：-71px；宽度：100px；高度：0；边框宽度：71px71px0；边框样式：实心；边框颜色：#f69透明透明；}.a:after{位置：绝对；内容：””;顶部：71px；左：-71px；宽度：242px；高度：0；边框宽度：00100px；背景：无；边框样式：实心；边框颜色：透明透明#f69；}总结以上是纯CSS做的单个div的正多边形变换。如果你技术好的话，其实还可以像下面的例子一样，加上动画效果来制作变形动画！不过下面的例子是用另外一个div包在外面做尺寸变换动画，避免尺寸变换造成连线不一致，大家可以参考一下！如果你想学习更多的CSS技巧，可以关注我的博客：CODECOLOR
