title: How can I skew one side of a div and then replicate it and skew a different side?
body: <p>Suppose I have a div:</p>
  
  <pre><code>div {
      height: 100px; 
      width: 500px; 
      background: blue; 
      margin: 0 auto; 
  } 
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/w93eS.png" alt="enter image description here"></p>
  
  <p>And I want it to become two mode - <a href="http://www.w3schools.com/css/css3_2dtransforms.asp" rel="nofollow noreferrer">skew</a> to each side - </p>
  
  <p><img src="https://i.stack.imgur.com/hBTmG.png" alt="enter image description here"> </p>
  
  <p>Here is the base form - <a href="http://jsfiddle.net/urielz/neybabgj/" rel="nofollow noreferrer">http://jsfiddle.net/urielz/neybabgj/</a></p>
  
  <p>How could I get the above two forms?</p>
  
  <p><strong>Update :</strong></p>
  
  <p>If it required using JavaScript - do it. </p>