css制作的各种图形

1、六角形的制作:

代码：

#star-six{

               height:0;

               width:0;

               border-bottom:100px solid red;

               border-left: 50px solid transparent;

               border-right:50px solid transparent;

               position: relative;

           }

        #star-six:after{

            width:0;

            height:0;

            border-top:100px solid red;

            border-left:50px solid transparent;

            border-right:50px solid transparent;

            position: absolute;

            content:"";

            top:30px;

            left:-50px;

        }

　　2、五角星的制作：

        #star-five{

            display: block;

            position: relative;

            color:red;

            width:0;

            height:0;

            border-left:100px solid transparent;

            border-right:100px solid transparent;

            border-bottom:70px solid red;

            -webkit-transform:rotate(35deg);

            -moz-transform:rotate(35deg);

            -ms-transform:rotate(35deg);

            -o-transform:rotate(35deg);

        }

        #star-five:before{

            width:0;

            height:0;

            border-left:30px solid transparent;

            border-right:30px solid transparent;

            border-bottom:80px solid red;

            content: "";

            display: block;

            position: absolute;

            top:-45px;

            left:-65px;

            -webkit-transform:rotate(-35deg);

            -moz-transform:rotate(-35deg);

            -ms-transform:rotate(-35deg);

            -o-transform:rotate(-35deg);



        }

        #star-five:after{

            width:0;

            height:0;

            border-left:100px solid transparent;

            border-right:100px solid transparent;

            border-bottom:70px solid red;

            color:red;

            display: block;

            position: absolute;

            top:3px;

            left:-105px;

            content: "";

            -webkit-transform:rotate(-70deg);

            -moz-transform:rotate(-70deg);

            -ms-transform:rotate(-75deg);

            -o-transform:rotate(-75deg);

        }

　　3、五边形的制作：

      #pentagon{

           border-width:50px 18px 0;

            border-style:solid;

            border-color:red transparent;

            width:54px;

            position: relative;



        }

        #pentagon:before{}

        #pentagon:after{

            border-width:0 45px 35px;

            border-style: solid;

            border-color: transparent  transparent red;

            content: "";

            width:0;

            height:0;

            position: absolute;

            top:-85px;

            left:-18px;

        }

　　4、八边形的制作：

       #octangon{

            width:100px;

            height:100px;

            background: red;

            position: relative;



        }

        #octangon:before{

            width:42px;

            height:0;

            content:"";

            border-left:29px solid #eee;

            border-right:29px solid #eee;

            border-bottom: 29px solid red;

            position: absolute;

            top:0;

            left:0;

        }

        #octangon:after{

            width:42px;

            height:0;

            content:"";

            border-left:29px solid #eee;

            border-right:29px solid #eee;

            border-top: 29px solid red;

            position: absolute;

  bottom:0;

         }

　　5、心形的制作：

#heart{

            width:100px;

            height:90px;

            position: relative;

        }

        #heart:before,

        #heart:after{

            content: "";

            position: absolute;

            background: red;

            top:0;

            left:50px;

            width:50px;

            height:80px;

            border-radius: 50px 50px 0 0;



            -webkit-transform:rotate(-45deg);

            -moz-transform:rotate(-45deg);

            -ms-transform:rotate(-45deg);

            -o-transform:rotate(-45deg);

            transform:ratate(-45deg);

            -webkit-transform-origin:0 100%;

            -moz-transform-origin:0 100%;

            -ms-transform-origin:0 100%;

            -o-transform-origin:0 100%;

            transform-origin:0 100%;

        }

        #heart:after{

            left:0;

            -webkit-transform:rotate(45deg);

            -moz-transform:rotate(45deg);

            -ms-transform:rotate(45deg);

            -o-transform:rotate(45deg);

            transform:ratate(45deg);

            -webkit-transform-origin:100% 100%;

            -moz-transform-origin:100% 100%;

            -ms-transform-origin:100% 100%;

            -o-transform-origin:100% 100%;

            transform-origin:100% 100%;

        }

　　转载地址：http://www.cnblogs.com/lhb25/p/css-and-css3-shapes-a.html