Rounded trapezoid with CSS

Question

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:

Answer 1

Here's my attempt lol

.trapezoid{
    position:relative;
    border-bottom: 100px solid blue;
    border-right: 12px solid transparent;
    border-left: 180px solid transparent;
    width: 122px;
}

.trapezoid:before{
    content:' ';
    left:-184px;
    top:98px;
    position:absolute;
    background:blue;
    border-radius:80px 20px 80px 80px;
    width:318px;
    height:20px;
}


.trapezoid:after {
    content:' ';
    left:-11px;
    top:-7px;
    position:absolute;
    background:blue;
    border-radius:150px 50px 90px 0px;
    width:133px;
    height:30px;
}


    

    

http://jsfiddle.net/Bzj3h/