小编给大家分享一下纯CSS如何实现单一div的正多边形变换,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
<强>正三角形
正三角形不需要用到伪元素,只需要设定div本身的边框宽度即可产生,先来看一下正三角形的边长与中线,若边长为100 px,则中线四舍五入就是87 px (100 x罪(60)=87)。
因此我们要将div的长宽都设为0,接着把底部边界的宽度设为87 px,左右的边框宽度设为50 px(颜色设为透明透明),就可以做出一个漂亮的三角形。
<强>正方形
正方形应该是最简单的,只要设定长宽设定为同样数值就可以了,不过其实还有另外两种方法,第一种你可以把长宽设为0,把上下左右的边框设为50 px也可以,第二种则是高度设为0,宽度设为100 px,然后某个边宽也设为100,都是可以的。
<强>正五边形
正五边形就需要进入基本的三角函数领域了,让我们先把正五边形分解,用原本的div作为上方的三角形,然后用一个伪元素制作下方的梯形,因为正五边形每边的夹角为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稍作修改就可以做出正六边形了。
<强>正七边形
正七边形开始就必须再使后用这个伪元素了,因为正七边形必须要拆解为三个内存块,分别是用原本的div作为上面的三角形,一个伪元素作为中间的梯形,然后另一个伪元素作为底部的梯形,正七边形的夹角比较特别不是整数,而是128又4/7度,大概取到小数第二位是128.57,所以计算起来结果就如下图所示,重点就是必须要清楚地知道长宽是多少。
