title: Almost There: Completely Smooth Trapezoid with CSS Skills
body: <p>I want to create a trapezoid with all corners rounded. I've gotten 2/4 of the way there but can't manage to get the bottom corners look nice. Here is what I have so far: <a href="http://jsfiddle.net/w8rHk/2/" rel="nofollow">http://jsfiddle.net/w8rHk/2/</a></p>
  
  <p>Color difference is for illustration only. It will be the same color in the end.</p>
  
  <p><strong>Question:</strong> How do I finish this and create a trapezoid with all nicely rounded edged? </p>
  
  <p>1 million points if you can make it scale up and down for screen sizes with out it breaking. That's a ninja level I don't come close to approaching yet. </p>
  
  <p><strong>Question 2:</strong> Any way to put a gradient on this bad boy? </p>
  
  <p>Thanks for the help!</p>
  
  <h1>Code:</h1>
  
  <pre><code>.trapezoid{
  vertical-align: middle;
  position:relative;
  border-bottom: 120px solid blue;
  border-left: 200px solid transparent;
  border-top-left-radius:30px;
  border-top-right-radius:30px;
  *border-bottom-right-radius:3px;
  height: 0;
  width: 150px;}
  
  .trapezoid:after {
  content:' ';
  left:-14px;
  top:-10px;
  position:absolute;
  background:red;
  border-radius:40px 30px 0 0;
  width:164px;
  height:40px;
  display:block;
  }​
  </code></pre>