CSS3 drawing a drawing

Star shape:

. Star-six{width:0;Height:0;Border-left:50px Solid Transparent;Border-right:50px Solid Transparent;Border-bottom:100px Solid Yellow;position:relative;}. Star-six:after{width:0;Height:0;Border-left:50px Solid Transparent;Border-right:50px Solid Transparent;Border-top:100px Solid Yellow;position:Absolute;content: "";Top:30px; Left:-50px;}

Pentagram:

. Star-five{margin:50px 0;position:relative;Display:Block;Color:Red;width:0px;Height:0px;Border-right:100px Solid Transparent;Border-bottom:70px Solid Red;Border-left:100px Solid Transparent;-moz-transform:Rotate (35deg);-webkit-transform:Rotate (35deg);-ms-transform:Rotate (35deg);-o-transform:Rotate (35deg);}. Star-five:before{Border-bottom:80px Solid Red;Border-left:30px Solid Transparent;Border-right:30px Solid Transparent;position:Absolute;Height:0;width:0;Top:-45px; Left:-65px;Display:Block;content:"';-webkit-transform:Rotate ( -35deg);-moz-transform:Rotate ( -35deg);-ms-transform:Rotate ( -35deg);-o-transform:Rotate ( -35deg);}. Star-five:after{position:Absolute;Display:Block;Color:Red;Top:3px; Left:-105px;width:0px;Height:0px;Border-right:100px Solid Transparent;Border-bottom:70px Solid Red;Border-left:100px Solid Transparent;-webkit-transform:Rotate ( -70deg);-moz-transform:Rotate ( -70deg);-ms-transform:Rotate ( -70deg);-o-transform:Rotate ( -70deg);content:"';}

Pentagon:

. Pentagon{position:relative;width:54px;Border-width:50px 18px 0;Border-style:Solid;Border-color:Purple Transparent;Top:50px;}. Pentagon:before{content: "";position:Absolute;Height:0;width:0;Top:-85px; Left:-18px;Border-width:0 45px 35px;Border-style:Solid;Border-color:Transparent transparent Purple;}

Hexagon:

. Hexagon{width:100px;Height:55px;background:#6c6;position:relative;}. Hexagon:before{content: "";position:Absolute;Top:-25px; Left:0;width:0;Height:0;Border-left:50px Solid Transparent;Border-right:50px Solid Transparent;Border-bottom:25px Solid #6c6;}. Hexagon:after{content: "";position:Absolute;Bottom:-25px; Left:0;width:0;Height:0;Border-left:50px Solid Transparent;Border-right:50px Solid Transparent;Border-top:25px Solid #6c6;}

Eight-edged shape:

. Octagon{width:100px;Height:100px;background:Orange;position:relative;}. Octagon:before{content: "";position:Absolute;Top:0; Left:0;Border-bottom:29px Solid Orange;Border-left:29px Solid #fff;Border-right:29px Solid #fff;width:42px;Height:0;}. Octagon:after{content: "";position:Absolute;Bottom:0; Left:0;Border-top:29px Solid Orange;Border-left:29px Solid #fff;Border-right:29px Solid #fff;width:42px;Height:0;}

Heart Shape:

. Heart{position:relative;width:100px;Height:90px;}. Heart:before,.heart:after{position:Absolute;content: ""; Left:50px;Top:0;width:50px;Height:80px;background:Red;-moz-border-radius:50px 50px 0 0;Border-radius:50px 50px 0 0;-webkit-transform:Rotate ( -45deg);-moz-transform:Rotate ( -45deg);-ms-transform:Rotate ( -45deg);-o-transform:Rotate ( -45deg);Transform:Rotate ( -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:Rotate (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%;}

Trapezoidal:

{    border-bottom: 100px solid #F36823;     border-left: 50px solid Transparent;     border-right: 50px solid Transparent;     height: 0;     width: 100px;}

CSS3 drawing a drawing