Here you’ll find a range off shapes all coded with just pure CSS3 code. Unfortunately not all shapes will render correctly in all browsers, currently only web browsers that support CSS3 will produce the correct geometric shapes.

Square

#square {
  width: 100px;
  height: 100px;
  background: #00dfc0;
}

Circle

#circle {
  width: 100px;
  height: 100px;
  background: #00dfc0;
  border-radius: 50%
}

Oval

#oval {
      width: 200px;
      height: 100px;
      background: #00dfc0;
      border-radius: 100px / 50px;
}

Up Triangle

#triangle-up {
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 100px solid #00dfc0;
}

Down Triangle

#triangle-down {
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-top: 100px solid #00dfc0;
}

Left Triangle

 #triangle-left {
      width: 0;
      height: 0;
      border-top: 50px solid transparent;
      border-right: 100px solid #00dfc0;
      border-bottom: 50px solid transparent;
}

Right Triangle

#triangle-right {
      width: 0;
      height: 0;
      border-top: 50px solid transparent;
      border-left: 100px solid #00dfc0;
      border-bottom: 50px solid transparent;
}

Triangle Top Left

#triangle-topleft {
      width: 0;
      height: 0;
      border-top: 100px solid #00dfc0;
      border-right: 100px solid transparent;
}

Triangle Top Right

#triangle-topright {
      width: 0;
      height: 0;
      border-top: 100px solid #00dfc0;
      border-left: 100px solid transparent;
}

Triangle Bottom Left

#triangle-bottomleft {
      width: 0;
      height: 0;
      border-bottom: 100px solid #00dfc0;
      border-right: 100px solid transparent;
}

Triangle Bottom Right

 #triangle-bottomright {
      width: 0;
      height: 0;
      border-bottom: 100px solid #00dfc0;
      border-left: 100px solid transparent;
}

Trapezoid

#trapezoid {
      border-bottom: 80px solid #00dfc0;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      height: 0;
      width: 150px;
}
  

Diamond

#diamond {
      width: 0;
      height: 0;
      border: 50px solid transparent;
      border-bottom-color: #00dfc0;
      position: relative;
      top: -50px;
}
    #diamond:after {
      content: '';
      position: absolute;
      left: -50px;
      top: 50px;
      width: 0;
      height: 0;
      border: 50px solid transparent;
      border-top-color: #00dfc0;
}

Rectangle

#rectangle {
  width: 200px;
  height: 100px;
  background: #00dfc0;
}

Parallelogram

#parallelogram {
      width: 150px;
      height: 100px;
      margin-left: 20px;
      transform: skew(20deg);
      background: #00dfc0;
}

Five Point Star

#star-five {
      margin: 50px 0;
      position: relative;
      display: block;
      color: #00dfc0;
      width: 0px;
      height: 0px;
      border-right: 100px solid transparent;
      border-bottom: 70px solid #00dfc0;
      border-left: 100px solid transparent;
      transform: rotate(35deg);
}
#star-five:before {
      border-bottom: 80px solid #00dfc0;
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;
      position: absolute;
      height: 0;
      width: 0;
      top: -45px;
      left: -65px;
      display: block;
      content: '';
      transform: rotate(-35deg);
}
#star-five:after {
      position: absolute;
      display: block;
      color: #00dfc0;
      top: 3px;
      left: -105px;
      width: 0px;
      height: 0px;
      border-right: 100px solid transparent;
      border-bottom: 70px solid #00dfc0;
      border-left: 100px solid transparent;
      transform: rotate(-70deg);
      content: '';
}

Six Point Star

#star-six {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 60px solid transparent;
    border-bottom: 100px solid #00dfc0;
    position: relative;
}
#star-six::after {
    width: 0;
    height: 0;
    border-left: 55px solid transparent;
    border-right: 55px solid transparent;
    border-top: 100px solid #00dfc0;
    position: absolute;
    content: "";
    top: 32px;
    left: -50px;
}
  

Speech Bubble

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

Egg

#egg {
   display:block;
   width:126px; 
/* width has to be 70% of height */
/* could use width:70%; in a square container */
   height:180px;
   background-color:#00dfc0;

/* beware that Safari needs actual px for border radius (bug) */
   -webkit-border-radius:63px 63px 63px 63px/
   108px 108px 72px 72px;
   /* fails in Safari, but overwrites in Chrome */
   border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
}

Pacman

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

Biohazard

#biohazard {
  width: 0;
  height: 0;
  border-bottom: 60px solid #122634;
  border-top: 60px solid #122634;
  border-left: 60px solid #d3ff00;
  border-right: 60px solid #d3ff00;
  -moz-border-radius: 60px; 
  -webkit-border-radius: 60px; 
  border-radius: 60px;
}

Heart

#heart {
      position: relative;
      width: 100px;
      height: 90px;
}
    #heart:before,
    #heart:after {
      position: absolute;
      content: "";
      left: 50px;
      top: 0;
      width: 50px;
      height: 80px;
      background: #00dfc0;
      border-radius: 50px 50px 0 0;
      transform: rotate(-45deg);
      transform-origin: 0 100%;
}
    #heart:after {
      left: 0;
      transform: rotate(45deg);
      transform-origin: 100% 100%;
}

Yin Yang

#yin-yang {
      width: 96px;
      box-sizing: content-box;
      height: 48px;
      background: #eee;
      border-color: #00dfc0;
      border-style: solid;
      border-width: 2px 2px 50px 2px;
      border-radius: 100%;
      position: relative;
}
    #yin-yang:before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      background: #eee;
      border: 18px solid #00dfc0;
      border-radius: 100%;
      width: 12px;
      height: 12px;
      box-sizing: content-box;
}
    #yin-yang:after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      background: #00dfc0;
      border: 18px solid #eee;
      border-radius: 100%;
      width: 12px;
      height: 12px;
      box-sizing: content-box;
}

Octagon

#octagon {
   width: 100px; 
   height: 100px; 
   background: #00dfc0;
   position:relative;
}
#octagon:before {
   height: 0;
   width: 40px;
   content:"";
   position: absolute; 
   border-bottom: 30px solid #00dfc0;
   border-left: 30px solid white; 
   border-right: 30px solid white; 
}
#octagon:after {
   height: 0;
   width: 40px;
   content:"";
   position: absolute; 
   border-top: 30px solid #00dfc0; 
   border-left: 30px solid white;  
   border-right: 30px solid white; 
   margin: 70px 0 0 0;
}