title: How do I create a 'Parallelogram' shape in css with a straight side?
body: <p>I am trying to create a Parallelogram with a straight right side in css but so far I am struggling to achieve this.</p>
  
  <p>I am using css ...</p>
  
  <pre><code>-webkit-transform: skew(-18deg);
  -moz-transform: skew(-18deg);
  -o-transform: skew(-18deg);
  </code></pre>
  
  <p>...to 'skew' the rectangle to create the Parallelogram.</p>
  
  <p>I am wondering if the right side can be made straight?</p>
  
  <p>Would it require :before and :after in the css?</p>
  
  <p>Any help of this would be great.</p>
  
  <p>Thanks,</p>
  
  <p>Phil</p>