Sunday, February 17, 2013

Using CSS to draw different shapes

We can use CSS to design different shapes. Examples CSS:
.Square { width: 100px; height: 100px; background: #669; }
.rectangle { width: 200px; height: 100px; background: #669; }
.trapezoid { border-bottom: 100px solid #669; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 100px; }
.parallelogram { width: 150px; height: 100px; -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg); background: #669;margin-left:20px; }
    <div class="Square"></div><br />
     <div class="rectangle"></div><br />
 <div class="trapezoid"></div> <br />
  <div class="parallelogram"></div>
Final demo:

No comments:

Post a Comment