这篇文章将为大家详细讲解有关CSS进行单一div正多边形变换的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
让单”一个“div,从正三角形变换为正八边形(单一div最多只能做到正八边形),最后再搭配动画的效果,变成正多边形的变换动画,也由于正多边形需要用到不少的三角函数计算,为了方便起见,这里将正多边形的边统一都设为100 px。
正三角形
正三角形不需要用到伪元素,只需要设定p本身的边框宽度即可产生,先来看一下正三角形的边长与中线,若边长为100 px,则中线四舍五入就是87 px (100 x罪(60)=87)。
因此我们要将p的长宽都设为0,接着把底部边界的宽度设为87 px,左右的边框宽度设为50 px(颜色设为透明透明),就可以做出一个漂亮的三角形。
正方形
正方形应该是最简单的,只要设定长宽设定为同样数值就可以了,不过其实还有另外两种方法,第一种你可以把长宽设为0,把上下左右的边框设为50 px也可以,第二种则是高度设为0,宽度设为100 px,然后某个边宽也设为100,都是可以的。
正五边形
正五边形就需要进入基本的三角函数领域了,让我们先把正五边形分解,用原本的p作为上方的三角形,然后用一个伪元素制作下方的梯形,因为正五边形每边的夹角为108度,所以可以藉由三角函数计算出上方三角形的高度为59 px (100 x cos(54),宽度为192 px (100 x sin (54) x 2),下方梯形的高度为95 px (100 x罪(72)),长边的宽度跟上面的三角形一样都是192 px。
了解原理之后,就可以利用伪元素来搭配制作啰!
正六边形
正六边形的每个夹角是120度,如果以纯CSS的方向来看的话,就是把正五边形上面的三角形改变一下,就可以做出正六边形,也就是变成上下两个梯形的组合而已,梯形的长边为200 px (100 x cos (60) x 2 + 100),梯形的高度为87 px (100 x罪(60))。
所以只要把正五边形的CSS稍作修改就可以做出正六边形了。
正七边形
正七边形开始就必须再使后用这个伪元素了,因为正七边形必须要拆解为三个内存块,分别是用原本的p作为上面的三角形,一个伪元素作为中间的梯形,然后另一个伪元素作为底部的梯形,正七边形的夹角比较特别不是整数,而是128又4/7度,大概取到小数第二位是128.57,所以计算起来结果就如下图所示,重点就是必须要清楚地知道长宽是多少。
有了长宽之后,就开始用CSS来写啰!
