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.
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!