CSS Shapes

#circle { 
  background: red; 
  border-radius: 70px;
  height: 100px;
  width: 100px;
}
#oval1 {
  background: yellow; 
  border-radius: 100px / 50px;
  height: 100px; 
  width: 200px; 
}
#oval2 {
  background: SandyBrown; 
  border-radius: 50px / 100px;
  height: 160px; 
  width: 80px; 
}

#trapezium1 {
  border-right: 40px solid transparent;
  border-bottom: 80px solid Aquamarine;
  border-left: 40px solid transparent;
  height: 0; 
  width: 80px;
}
#trapezium2 {
   border-top: 80px solid Coral;
   border-right: 40px solid transparent;
   border-left: 40px solid transparent;
   height: 0; 
   width: 80px;
}
#parallelogram {
  background: pink;
  height: 75px;
  width: 130px; 
  -moz-transform: skew(20deg); 
  -webkit-transform: skew(20deg); 
  -o-transform: skew(20deg);
  transform: skew(20deg);
}

#up-triangle {
   border-right: 60px solid transparent; 
   border-bottom: 80px solid green; 
   border-left: 60px solid transparent; 
   height: 0; 
   width: 0; 
}
#down-triangle { 
   border-top: 80px solid pink;
   border-right: 60px solid transparent; 
   border-left: 60px solid transparent; 
   height: 0;
   width: 0; 
}
#left-triangle {
   border-top: 50px solid transparent;
   border-right: 100px solid orange;
   border-bottom: 50px solid transparent;
   height: 0;
   width: 0;
}
#right-triangle {
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
   border-left: 100px solid red;
   height: 0;
   width: 0;
}

#octagon {
  background: DarkTurquoise;
  height: 100px; 
  width: 100px; 
}
#octagon:before {
  border-bottom: 30px solid DarkTurquoise;
  border-right: 30px solid #101921; /* el color del fondo */
  border-left: 30px solid #101921; /* el color del fondo */
  content:"";
  height: 0;
  position: absolute; 
  width: 40px;
}
#octagon:after {
   border-top: 30px solid DarkTurquoise; 
   border-right: 30px solid #101921; /* el color del fondo */
   border-left: 30px solid #101921; /* el color del fondo */
   content:"";
   height: 0;
   margin: 70px 0 0 0;
   position: absolute; 
   width: 40px;
}

#diamond {
   background: SkyBlue;
   height: 80px; 
   width: 80px; 
   -moz-transform: rotate(-45deg);
   -webkit-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
   -moz-transform-origin: 0 100%;
   -webkit-transform-origin: 0 100%;
   -ms-transform-origin: 0 100%;
   -o-transform-origin: 0 100%;
   transform-origin: 0 100%;
}

#twelve-point-star {
  background: orange;
  height: 100px;
  position: absolute;
  width: 100px;
}
#twelve-point-star:before {
  background: orange;
  content:"";
  height: 100px;
  position: absolute;
  width: 100px;
  -moz-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  transform: rotate(30deg);
}
#twelve-point-star:after {
  background: orange;
  content:"";
  height: 100px;
  position: absolute;
  width: 100px;
  -moz-transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
  transform: rotate(-30deg);
}

#six-point-star {
  border-bottom: 80px solid red;
  border-right: 50px solid transparent; 
  border-left: 50px solid transparent; 
  position: absolute;
  height: 0; 
  width: 0; 
}
#six-point-star:after {
  border-top: 80px solid red;
  border-right: 50px solid transparent; 
  border-left: 50px solid transparent; 
  content:"";
  height: 0; 
  margin: 30px 0 0 -50px;
  position: absolute;
  width: 0; 
}

#speech-bubble {
  background: Thistle;
  border-radius: 10px;
  height: 80px;
  position: absolute;
  width: 120px;
}
#speech-bubble:before {
  border-top: 13px solid transparent;
  border-right: 26px solid Thistle;
  border-bottom: 13px solid transparent;
  content:"";
  height: 0;
  margin: 13px 0 0 -25px;
  position: absolute;
  width: 0;
}

#pacman {
  border-top: 60px solid yellow;
  border-right: 60px solid transparent;
  border-bottom: 60px solid yellow;
  border-left: 60px solid yellow;
  border-radius: 60px;
  height: 0px;
  width: 0px;
}

#heart { 
  position: relative;
}
#heart:before, #heart:after {
  background: red;
  border-radius: 50px 50px 0 0;
  content: "";
  height: 115px;
  left: 70px;
  position: absolute;
  top: 0;
  width: 70px;
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -moz-transform-origin: 0 100%;
  -webkit-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  transform-origin: 0 100%;
}
#heart:after { 
 left: 0; 
  -moz-transform: rotate(45deg); 
  -webkit-transform: rotate(45deg); 
  -ms-transform: rotate(45deg); 
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -moz-transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin :100% 100%;
}

REFERENCIAS:CSS3 Shapes