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
Deutsch