I’m trying to do something new with this menu I’ve been working on. I have the following image for hover over state:
How can I go about making this a CSS shape? I need that as CSS so that when the menu item get’s bigger, the shape will just adjust accordingly. I played around with the border properties, but couldn’t quite get it right. Any help would be greatly appreciated.
I need that as CSS so that when the menu item get’s bigger, the shape will just adjust accordingly.
You’d really be better off using images for that as the code would get quite bloated with all the extra elements and difficulty needed to do it with CSS only. Not to mention browser support with the shadows.
What you would want to do is use the Sliding Doors technique for auto adjusting widths. You’ll need to take that image and split it down the middle to get your lt. and rt. sides. Then create a center section that seams into them and it will be a repeating image.
You might be able to use one image that would be wider than you need and control it with BG positions. Something like this …
Sliding Door Tabs with Dropline Subnav
Regardless I would go for images for cross browser support.