The Grid Line

My Photo
Location: Bothell, WA, United States

A long history of involvement in Web Design and Development, with humble beginnings at Geocities and Angelfire, have exploded into a career in which I focus on Web Standards, Web Accessibility Guidelines, and Usability through Human-Computer Interaction theory. I also participate in an ongoing search for the best methods for building, maintaining, and enhance Web sites.

Powered by Blogger

Subscribe to Posts [Atom]

Tuesday, March 16, 2010

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 Due
The 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 Shapes
Lets 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.
The 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 example, which is very simple, the width and height are the same, thereby creating a square. A rectangle, obviously, only has different width and height values.
Though 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:
Triangles 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) Endless
While 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.

Labels: ,

posted by Jake Kronika, Owner, Gridline Design at


Blogger Marie said...

Working on Los Angeles web design projects made me realize that sometimes, less is truly more. These basic shapes can be used to create seemingly elaborate page designs.

February 26, 2012 9:54 PM  
Blogger Unknown said...

I have read your post, That's truly big help for me. Thanks for share..Web Design Birmingham

June 17, 2013 2:50 AM  
Anonymous Cathrine said...

CSS allows us to generate content using a property called, appropriately enough, “content”. However, we can only use this property using the :after or :before pseudo-elements, and we’re somewhat limited on what we can insert (we can’t insert more HTML for instance).

What’s cool about this though is that with the content we insert, we can style it as if it were an element. This means we can transform it into a polygonal shape. And because the :after and :before pseudo-elements insert after or before the content of our element (and not outside of the element), we can move it around and position it relative to our element. From there we can use it as a contextual pointer.

For website design cambridge contact us.

June 22, 2013 11:47 PM  
Anonymous Web Design Singapore said...

I enjoyed reading it. I need to read more on this topic...I admiring time and effort you put in your blog, because it is obviously one great place where I can find lot of useful info..

June 24, 2013 4:48 AM  
Blogger Unknown said...

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. Web Design

October 01, 2013 4:14 AM  
Anonymous Twin Cities Web Design said...

How do we check to see if these CSS shapes can work for web design and things?

January 13, 2014 4:14 PM  
Blogger Jake Kronika, Owner, Gridline Design said...

In response to @TwinCitiesWebDesign above, I've used shapes like these pretty often in work I have put together for clients and at my full-time job. In particular, they are handy to add caret indicators denoting an item as being the active or in-focus part of a page. For instance, you might use these techniques in combination with a :before pseudo-element to indicate which parent a flyover menu relates to. Another common use in the same paradigm is to point out that a sidebar link (styled as a vertical tab set, perhaps) is the one whose content is shown in the main area. Furthermore, you might again point out that some text corresponds to the image that lies above, below, or to one side of it, particularly if the content of the page is built in a fairly complex way.

That all has to do with the use of triangular shapes. Rounded corners are extremely common for making paging navigation for use with rotators (instead of simply showing the numerals). A partially rounded button is much more elegant, in many cases, than a complete square one.

In the end, any technique can be used in a multitude of ways to implement a website. Combining all of the techniques that are out there, learning new ones all the time, and building a practically infinite toolbox is exactly what I aim to do. Ever changing, ever expanding... the realm of web design and development is intriguing beyond comparison to nearly anything else, in my experience. It is a wonder to explore, and a joy to create.

January 21, 2014 10:41 PM  
Anonymous Mobiim said...

I tested and it worked well for my cases. Thanks for your suggestion and explanation.

February 03, 2014 7:47 PM  

Post a Comment

Subscribe to Post Comments [Atom]

<< Home

About this Blog

Everything from Web standards to AJAX tutorials, PHP code snippets to client reviews. Anything relating to the work of Gridline Design can be found on The Grid Line.

Current Reading List

Previous Posts