So I was working on a project recently where I needed to create CSS tabs in the shape of trapezoid controls in a web application. I had some extra time on my hands, and I wanted to do this in CSS instead of using images.

I searched around the web for a while trying to look for some nice examples of CSS tabs but couldn’t find anything that matched my spec exactly. However, I did find some solid inspiration from this article on CSS-Tricks. Using the basic concepts there, here’s what I came up with:

View the demo here: http://jsfiddle.net/stephenkimster/q2ASL/

If you look closely, I had to draw two separate shapes for the CSS tabs (one with the gradient fill and one with a solid fill to get the borders working correctly).

Enjoy!