Abgerundetes Trapez mit CSS

Ich habe ein kleines Problem mit CSS. Ich brauche ein trapezförmiges Div, dessen obere linke Ecke (die mit dem Winkel über 90 Grad) abgerundet ist. Das weiß ich schon:

HTML:

<div style="margin:30px">
  <div class="trapezoid">
  </div>
</div>

CSS:

.trapezoid{
  vertical-align: middle;
  border-bottom: 31px solid red;
  border-left: 25px solid transparent;
  height: 0;
  width: 150px;
}

erzeugt ein Trapez. Ich habe es versuchtborder-top-left-radius Eigenschaft, jedoch ist die Wirkung nicht ausreichend genug.

Hier ist eine jsfiddle mit dem obigen Code, mit der man gut herumspielen kann:http://jsfiddle.net/n3TLP/5/

Ich brauche da mehr Infos nur einen Kommentar.
Danke im Voraus :)

Antworten auf die Frage(5)

Ihre Antwort auf die Frage