Using CSS to draw different shapes

We can use CSS to design different shapes. Examples CSS:
     <style>
            /*square*/
.Square { width: 100px; height: 100px; background: #669; }
/*rectangle*/
.rectangle { width: 200px; height: 100px; background: #669; }
/*trapezoid*/
.trapezoid { border-bottom: 100px solid #669; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 100px; }
/*parallelogram*/
.parallelogram { width: 150px; height: 100px; -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg); background: #669;margin-left:20px; }
        </style>
In HTML:
    <div class="Square"></div><br />
     <div class="rectangle"></div><br />
 <div class="trapezoid"></div> <br />
  <div class="parallelogram"></div>
Reference:
http://www.cnblogs.com/pigtail/archive/2013/02/17/2914119.html
Final demo: