It’s super useful to make your shapes in css rather than photoshopping something because you can change the scale and color at any time!
I used this when modifying JQuery Tools’ Image Slider with navigator dots.
They had theirs set as background image sprites, but I think it is much easier to work with css shapes. I could make the dots grow on hover, fade, change color- much easier to customize than to bring edit their image sprite.
Their demo: (flowplayer.org/tools/demos/tabs/slideshow.html)
I changed the background property from an image to a color “background: #522900;”
The width and height were already set, and I added in the border radius. As long as the border radius is 50% of height/width.. aka any surface in a square, it becomes a triangle. This is because you’re saying to curve that much % of the surface, and after halfway, the other part is curved too.. meaning no more straight edges!
/* single tab */ .slidetabs a { width:8px; height:8px; float:left; margin:3px; background: #522900; -moz-border-radius: 4px; -webkit-border-radius: 4px; display:block; font-size:1px; }
more reading: dev-tips.com/featured/css-tip-how-to-make-ircles-without-images