Gridline Design Blog Pure CSS Shapes

.shape { background-color: #000; color: #fff; margin: 10px auto; padding: 10px; }.null { height: 0; padding: 0; width: 0; }.square { height: 250px; width: 250px; }.rectangle-tall { height: 300px; width: 250px; }.rectangle-wide { height: 250px; width: 300px; }.rounded-small { -moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px; }.rounded-large { -moz-border-radius: 75px; -webkit-border-radius: 75px; border-radius: 75px; }.circle { -moz-border-radius: 135px; -webkit-border-radius: 135px; border-radius: 135px; height: 250px; width: 250px; }.border-example { border-style: solid; border-width: 25px; border-top-color: #c00; border-right-color: #060; border-bottom-color: #00f; border-left-color: #ff0; }.triangle { border-style: solid; border-width: 25px; border-color: #fff; float: left; margin-right: 10px; }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.In the case of the above, very simple example, the width and height are the same, thereby creating a square. A rectangle, obviously, only has different width and height values.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:This square illustrates perfectly how each of the borders is created as a straight line, with one feature of particular interest - in each of the corners of the element, the border becomes diagonal, with its edge abutting the adjacent border from the corner of the element inside to the outer corner of the borders. It is by using this angled edge that we can create a triangle. The first step is to set the width and height of the element to zero, which results in the following:As we can see, we now have four triangles simply by removing the width and height. By adjusting the border widths and colors, the triangles can be manipulated to create virtually infinite variations.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.