css绘制多种多变形

主要思想是：四边组成一个矩形，通过改变每条边的形状来绘制多边形

• border-位置：宽度 ，样式 ，颜色
• 通过控制div的长宽，以及边的宽度和颜色来控制
• 带入门，发挥想象就靠您了

• 当div有宽高时

• 中间撑开的为空白为div的形状

                border-top: 100px solid ;
                border-bottom: 100px solid ;
                border-right: 100px solid #5bc0de;
                border-left: 100px solid #5bc0de;
                transform: translate(-50%, -50%);

• 当有的边框为透明时

               border-top: 100px solid  transparent;
               border-bottom: 100px solid #5bc0de;
               border-right: 100px solid transparent;
               border-left: 100px solid transparent;

• 当div的宽高为0时

                width: 0px;
                height: 0px;
                border-top: 100px solid  transparent;
                border-bottom: 100px solid #5bc0de;
                border-right: 100px solid transparent;
                border-left: 100px solid transparent;