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