CSS 如何进行单一div的正多边形变换

互联网 19-4-29

本文是纯粹利用CSS，让“单一个”div，从正三角形变换为正八边形（单一div最多只能做到正八边形），最后再搭配动画的效果，变成正多边形的变换动画，也由于正多边形需要用到不少的三角函数计算，为了方便起见，这里将正多边形的边统一都设为100px。

正三角形

因此我们要将p的长宽都设为0，接着把底部border的宽度设为87px，左右的border宽度设为50px（颜色设为透明transparent），就可以做出一个漂亮的三角形。

width:0; height:0; border-width:0 50px 87px ; border-style:solid; border-color:transparent transparent #095;

正方形

正方形应该是最简单的，只要设定长宽设定为同样数值就可以了，不过其实还有另外两种方法，第一种你可以把长宽设为0，把上下左右的border设为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:0 0 100px; border-style:solid; border-color:#069; }

正五边形

了解原理之后，就可以利用伪元素来搭配制作啰！

.a{       position:relative;   width:0;   height:0;   border-width:0 81px 59px;       border-style:solid;   border-color:transparent transparent #069; } .a:before{   position:absolute;   content:"";   top:59px;   left:-81px;   width:100px;   height:0;   background:none;   border-width:95px 31px 0;   border-style:solid;       border-color:#069 transparent transparent;     }

正六边形

所以只要把正五边形的CSS稍作修改就可以做出正六边形了。

.a{       position:relative;     width:100px;     height:0;     border-width:0 50px 87px;       border-style:solid;     border-color:transparent transparent #f80; } .a:before{   position:absolute;   content:"";     top:87px;     left:-50px;     width:100px;     height:0;   background:none;     border-width:87px 50px 0;   border-style:solid;         border-color:#f80 transparent transparent;     }

正七边形

.a{       position:relative;     width:0;     height:0;     border-width:0 90px 43px;       border-style:solid;     border-color:transparent transparent #09c; } .a:before{   position:absolute;   content:"";     top:140px;     left:-112px;     width:100px;     height:0;     border-width:78px 62px 0;   border-style:solid;         border-color:#09c transparent transparent;     }   .a:after{     position:absolute;     content:"";     top:43px;     left:-112px;     width:180px;     height:0;     border-width:0 22px 97px;     background:none;     border-style:solid;     border-color:transparent transparent #09c;   }

正八边形

.a{       position:relative;     width:100px;       height:0;       border-width:0 71px 71px;       border-style:solid;     border-color:transparent transparent  #f69; } .a:before{   position:absolute;   content:"";     top:171px;       left:-71px;       width:100px;       height:0;       border-width:71px 71px 0;   border-style:solid;           border-color: #f69 transparent transparent;     }   .a:after{       position:absolute;       content:"";       top:71px;       left:-71px;       width:242px;       height:0;       border-width:0 0 100px;       background:none;       border-style:solid;       border-color:transparent transparent #f69;   }