File Under: CSS

Creating Shapes in Pure CSS

One of the best things about CSS 3 is that it reduces the need to use images in your designs. That means fewer HTTP requests, few bytes to download and fewer files to keep track of. Need rounded corners? That’s pure CSS now. How about drop shadows? Yes, pure CSS. The infinity symbol? Actually yes, you can draw the symbol for infinity with nothing more than a few lines of CSS.

The web developers over at CSS-Tricks have put together a page showing off the basic shapes you can create using only a single HTML element and all the CSS you can eat. Everything from the obvious, squares and circles, to the somewhat trickier five-pointed star or infinity symbol (contributed by developers Kit MacAllister and Nicolas Gallagher respectively).

If you need to add some basic shapes to your site, but don’t want the overhead of image files, the code on CSS-Tricks might fit the bill. The page has been up for some time now, but it’s periodically updated with new shapes so it’s worth adding to your bookmarks. You should, however, keep in mind that not all of the code works in every web browser.

See Also: