Best way to add tab image indicator with jquery ui tabs

I’m using jquery ui and been reskinnning the tabs to emulate yahoo look.

My demo page is here: http://www.nvcc.edu/home/ssuh/galleria/

What’s the best way to get the selected tab to show a triangle that breaks out of the box? I was going to just insert an image and use CSS to determine whether the state is active or not. I have the triangle image in the html with a negative margin. My ways seems to be clunky since I would have to insert the triangle for each tab in the html.

DEMO: http://jsfiddle.net/OMGCarlos/4ZJ5T/
(hover over element to see triangle)

You could actually do this with pure CSS and NO images!

First, you’ll need to add a div inside each tab content area, something like: <div class=“tab-triangle”></div>
Styling it like so:


.tab-triangle {
    display: none;
    position: relative;
    width: 0;
    height: 0;
    margin: auto;
    top: -15px;

    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid green;
}&#8203;

Then you simply need to add a CSS style for when the tab is selected, in the demo I used hover to keep it simple:


.tab:hover > .tab-triangle{
    display: block;
    margin-bottom: -15px;
}

That first snippet creates a triangle using what I call the “CSS Triangle Hack”. You basically create a block element with zero width/height, and set the border size and colors. By setting the side-borders of the box to transparent (yet giving it width) you’ll actually end up creating a triangle!

that is pretty amazing! i was able to hack it with a background image but i’ll look into using your solution!