title: CSS Transform to skew the shape to a trapezium
body: <p>I want to be able to skew an element in the way the image displays below. </p>
  
  <p><img src="https://i.stack.imgur.com/paFvg.png" alt="rhombus"></p>
  
  <p>I have been playing around with it, but dont seem to be able to get close to replicating that shape.</p>
  
  <p>My css code is</p>
  
  <pre><code>transform:skew(30deg,30deg);
  </code></pre>
  
  <p>Is transform even the right way to do this? Please let me know the best, most browser compatible, solution.</p>