title: Rounded trapezoid with CSS
body: <p>I'm having a slight problem with css. I need a trapezoid div which upper left corner(the one with the angle above 90 degrees) is rounded. I already know that this: </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div style="margin:30px"&gt;
    &lt;div class="trapezoid"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.trapezoid{
    vertical-align: middle;
    border-bottom: 31px solid red;
    border-left: 25px solid transparent;
    height: 0;
    width: 150px;
  }
  </code></pre>
  
  <p>produces a trapezoid. I tried the <code>border-top-left-radius</code> property, however the effect is  not sufficent enough. </p>
  
  <p>Here's a jsfiddle with the above code to, well, fiddle with: <a href="http://jsfiddle.net/n3TLP/5/" rel="nofollow">http://jsfiddle.net/n3TLP/5/</a>  </p>
  
  <p>I there is more info needed just comment.<br>
  Thanks in advance :)</p>