css制作的各种图形

#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;
}

#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);
}

#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;
}

#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;
}

#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%;
}