Forums

CSS Navigation Menu Style

I’ve been working on a menu style that has me stumped. I’ve set up a jsfiddle [here](http://jsfiddle.net/thatschris/SQgC9/ “jsfiddle.net”) rather than trying to explain it. Currently, my menu is like the menu in the fiddle, the look I’m going for is the green div below, with the curved tab look. I’ve been trying to use a radial gradient, rather than a linear gradient, but I can’t seem to get the positioning down, and everywhere I turn, I can’t seem to find clear cut syntax for a radial gradient.

I don’t have a link to a site that uses this menu, except the one I’m currently working on.. [http://basspimprecords.com](http://basspimprecords.com “basspimprecords.com”)

I had the linear gradient like in the fiddle, but I’ve been trying to get the look done using radial gradients, so that’s what’s in place now

Also, I thought about using the technique in the link you posted, but found Lea Verou’s to be a better option, as there’s no colored element to create the curve, I used Lea Verou’s inverted radius technique to create the curve look on the search bar

To summarize, I’d just like a border radius on the top right corner, which can’t be done using a linear gradient, and since webkit doesn’t support transitions for pseudo elements, using the css-tricks and lea verou’s solution aren’t options..

I feel like a radial gradient is an option, but I can’t wrap my head around the syntax, can’t find a way to position it properly, and it seems everywhere I look for proper radial gradient syntax gives me different options for position, and none of them seem to work how I need it to.

Yea, I understand I’d lose the right border, but my thought was that if I had the perfectly (over)sized vertical ellipse gradient, with a center position just outside the element (not sure if there’s syntax to position it with negative em’s or percentages), with the top of the gradient touching the top left corner of the element, I could get just enough curve to give the tab look. Not ideal, but I’m trying to avoid using an image.

Tips

Categories

We have a pretty good* newsletter.

Email Address

CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans Pro and Source Code Pro. It is made possible through sponsorships from products and services we like.