#trapezoid { border-bottom: 200px solid blue; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 100px; } 

#parallelogram { transform: rotate(360deg); width: 150px; height: 100px; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); background: blue; }

/* Spinning, gradient circle; CSS only! */
#advanced {
  width: 200px;
  height: 200px;
  
  background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, blue 95%);
  background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
  background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, blue 95%);
  
  animation-name: spin; 
  animation-duration: 3s; /* 3 seconds */
  animation-iteration-count: infinite; 
  animation-timing-function: linear;
}

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

#diamond-5px {
   width: 2080px; 
   height: 5px; 
   background: blue;
   margin: 450px 1000px 0 70px;
   /* Rotate */
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
   /* Rotate Origin */
   -webkit-transform-origin: 0 100%;
   -moz-transform-origin: 0 100%;
   -ms-transform-origin: 0 100%;
   -o-transform-origin: 0 100%;
   transform-origin: 0 100%;
}

#diamond-10px{
   width: 2080px; 
   height: 10px; 
   background: blue;
   margin: 420px 1000px 0 -380px;
   /* Rotate */
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
   /* Rotate Origin */
   -webkit-transform-origin: 0 100%;
   -moz-transform-origin: 0 100%;
   -ms-transform-origin: 0 100%;
   -o-transform-origin: 0 100%;
   transform-origin: 0 100%;
}

#diamond-15px{
   width: 2080px; 
   height: 15px; 
   background: blue;
   margin: 10px 1000px 0 -435px;
   /* Rotate */
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
   /* Rotate Origin */
   -webkit-transform-origin: 0 100%;
   -moz-transform-origin: 0 100%;
   -ms-transform-origin: 0 100%;
   -o-transform-origin: 0 100%;
   transform-origin: 0 100%;
}

#diamond-20px{
   width: 2080px; 
   height: 20px; 
   background: blue;
   margin: 10px 1000px 0 -475px;
   /* Rotate */
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
   /* Rotate Origin */
   -webkit-transform-origin: 0 100%;
   -moz-transform-origin: 0 100%;
   -ms-transform-origin: 0 100%;
   -o-transform-origin: 0 100%;
   transform-origin: 0 100%;
}

#diamond-25px{
   width: 2080px; 
   height: 25px; 
   background: blue;
   margin: 10px 1000px 0 -550px;
   /* Rotate */
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
   /* Rotate Origin */
   -webkit-transform-origin: 0 100%;
   -moz-transform-origin: 0 100%;
   -ms-transform-origin: 0 100%;
   -o-transform-origin: 0 100%;
   transform-origin: 0 100%;
}

#diamond-30px{
   width: 2080px; 
   height: 30px; 
   background: blue;
   margin: 10px 1000px 0 -645px;
   /* Rotate */
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
   /* Rotate Origin */
   -webkit-transform-origin: 0 100%;
   -moz-transform-origin: 0 100%;
   -ms-transform-origin: 0 100%;
   -o-transform-origin: 0 100%;
   transform-origin: 0 100%;
}

#diamond-50px{
   width: 2080px; 
   height: 50px; 
   background: blue;
   margin: 10px 1000px 0 -775px;
   /* Rotate */
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
   /* Rotate Origin */
   -webkit-transform-origin: 0 100%;
   -moz-transform-origin: 0 100%;
   -ms-transform-origin: 0 100%;
   -o-transform-origin: 0 100%;
   transform-origin: 0 100%;
}