title: Is it possible to style a div to be trapezoidal?
body: <p>I know it's possible to skew but I don't see a way to skew each corner with a particular degree.</p>
  
  <p>Here's the project I'm working on: <a href="http://map.ucf.edu/" rel="nofollow noreferrer">http://map.ucf.edu/</a></p>
  
  <p>Looking specifically at the tabs within the menu.  Right now I'm using images, I would like to change that for capable browsers.</p>
  
  <p>I know it's possible to create a <a href="http://www.cssyard.com/css-tutorials/making-shapes-in-css/" rel="nofollow noreferrer">CSS trapazoid</a>, but that is using borders without content.  The end result also needs a bit of rounded corners.</p>
  
  <p>edit:
  Starting with <a href="https://stackoverflow.com/questions/8718587/is-it-possible-to-style-a-div-to-be-trapezoidal/8718838#8718838">Zoltan Toth's solution</a> I was able to achieve this: <a href="http://jsfiddle.net/WsaQf/5/" rel="nofollow noreferrer">demo</a></p>
  
  <pre><code>div {
      height: 20px;
      padding:2px 5px 0 5px;
      color:white;
      background: rgba(0,0,0,.5);
      margin: 0 10px;
      position: relative;
      border-top-left-radius: 6px 4px;
      border-top-right-radius: 6px 4px;
      font-family:sans-serif;
      font-size:13px;
      line-height:20px;
      vertical-align:bottom;
      display:inline-block;
      white-space:nowrap;
  }
  
  div:before {
      content: '';
      line-height: 0;
      font-size: 0;
      width: 0;
      height: 0;
      border-bottom: 19px solid rgba(0,0,0,.5);
      border-left: 9px solid transparent;
      position: absolute;
      bottom: 0;
      left: -9px;
  }
  
  div:after {
      content: '';
      line-height: 0;
      font-size: 0;
      width: 0;
      height: 0;
      border-bottom: 19px solid rgba(0,0,0,.5);
      border-right: 9px solid transparent;
      position: absolute;
      bottom: 0;
      right: -9px;
  }
  
  .b { background:black; margin:0 -7px 0 20px; }
  .b:after, .b:before { border-bottom-color:black; }
  </code></pre>