纯CSS实现单一div的正多边形变换

上一篇我们介绍了如何利用before和after伪元素来做Material Design风格的按钮,里头关键的技术就在于活用边框宽度和div本体宽高,因此这篇再加码一个效果,就是纯粹利用CSS,让“单一个”div,从正三角形变换为正八边形(单一div最多只能做到正八边形),最后再搭配动画的效果,变成正多边形的变换动画,也由于正多边形需要用到不少的三角函数计算,为了方便起见,这里将正多边形的边统一都设为100px。 正三角形 正三角形不需要用到伪元素,只需要设定div本身的边框宽度即可产生,先来看一下正三角形的边长与中线,若边长为100px,则中线四舍五入就是87px(100 x sin(60)