Create This Shape Using CSS

Folks , here is my problem. A while back I created an application that had a number of images which the user would roll over and a red outline border would highlight this area & this was achieved using CSS. Now at that time I found through trail & error that css was (by far !) more bandwith friendly that slices & tables that I originally tried in fireworks, now this was all great as long as my areas were all squares or rectangles...

So here is the question, as I am a slow learner..please look at the attached image and tell me (preferably a small sample from you would be the beeees kneeeees) can I create the blue line using CSS ? I'm feeling I may have to go down the fireworks/photoshop route again but really would prefer to avoid this if at all possible !!

Thanks
BackOpen.jpg
LVL 1
mrmad1966Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

LZ1Commented:
CSS is extremely linear and wouldn't support the angles which the rectangle resides at.  
You may however be able to do it with a combination of jquery and CSS.  However, I think that you'll find it's much easier going with the Photoshop/Fireworks option and slicing it.  
0
JF0Commented:
Just because you need to use an image does not mean you need to use tables. Create 2 images, one for the mouse over state, and then you can use CSS to position the image and do a mouse over effect.
0
remorinaCommented:
Hi mrmad1966,
Your username tells it all :)
Can you elaborate on what you're trying to achieve ?

If you only needed the blue line or a clickable area it can be done using an image map and setting a css style for that map, otherwise it's not possible using css
0
remorinaCommented:
And an example for you :)
mrmad1966.zip
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.