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:

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.

(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;

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!