Pure CSS Shapes
Most designers wouldn't think twice about using an image when it comes to rendering complex shapes on a website. Circles, squares, triangles, and some other polygons, however, are actually possible to produce using pure CSS and minor additions in non-semantic HTML. For an HTML purist such as myself, the latter requirement is less than ideal, but the possibilities afforded by a pure CSS solution, particularly in terms of maintainability and flexibility, seem to outweigh this cost in certain cases.
Credit where Credit is DueThe credit for this entire idea of using cascading stylesheets to render shapes truly should go to David DeSandro, a graphic and web designer from Arlington, VA. His articles about CSS Speech Bubbles and an impressive Curtis CSS Typeface opened my eyes to a number of possibilities that would never otherwise have occurred to me.
Simple ShapesLets break things down to the ability to create simple shapes first, then extend and combine those to make more complex forms. Since kindergarten, everyone has been able to recognize shapes such as the square, circle, and triangle, so we'll start with those.
SquaresThe square (or rectangle) is obviously the most simple shape that can be produced using CSS, as any block-level element is already a square in and of itself. That being said, all that is needed to create a square shape is to give the element a background color, width, and height.
CirclesThough not entirely obvious at first, all that a circle would be, at least from a pure CSS perspective, is a special case of a square with rounded corners, built in such a way that the rounding of the corners completely removes the straight edges between the curves. The following shows a progression from square to circle by adjusting the rounding:
TrianglesTriangles are a bit more tricky to create than either squares or circles. To do this, we need first to understand the way that borders work in CSS. Most of the time, borders are either not used, or are applied in such a way that their individual structure is not clear. To make this structure more transparent, take a look at the square below:
Possibilities are (Practically) EndlessWhile this post doesn't go into full detail about all of the shapes that can be created using these methods, nor every method available using CSS rules alone to create shapes, it is obvious that there is quite a bit of power in the pattern. Beyond simply making individual shapes, imagine what can be created by combining two, three, or even ten of these shapes? Although the use of as many as ten or more elements to create a form is hardly a real-world use of CSS shapes, the fact that this sort of thing is possible is quite impressive in and of itself.
posted by Jake Kronika, Owner, Gridline Design at 6:46 AM