Creating Shapes With CSS Borders

I’ve been working on a site the last couple of days where my design calls for some large blocks of color that aren’t in rectangular shape. I didn’t want to use images for those trapezoidal shaped blocks, in part because I prefer to use code whenever I can to save download time and in part because using images would reduce the fluidity of the design somewhat. Fortunately the css border property comes to the rescue and with it the ability to create shapes other than simple rectangles. Add some JavaScript and the results can be pretty amazing.

The concept is really simple. When you create a border around any element in css neighboring sides meet at an angle. Usually the angle will be 45 degrees since more often than not you are adding a border around a rectangular element and all of the borders typically have the same width. You may never have noticed unless you’ve created borders of large enough width and used different colors on each side. But those angles are there.

It’s easier to see with an example so here’s a simple div which I’ve given a width of 150px, a height of 150px, and 20px borders all around. Each side uses a different color so you can see the angles


<div id="open"></div>

div#open {
width:150px; height:150px;
border-top:20px solid #C2762B;
border-right:20px solid #AAC32B;
border-bottom:20px solid #C2C2C2;
border-left:20px solid #3D3D3D;
}


Pretty cool, huh? Even better is when we use a width and height of 0 (and line-height:0 for Internet Explorer) for the div and increase the border widths to 100px each.


<div id="square"></div>

div#square {
width:0; height:0;
line-height:0;
border-top:100px solid #C2762B;
border-right:100px solid #AAC32B;
border-bottom:100px solid #C2C2C2;
border-left:100px solid #3D3D3D;
}


How about a triangle? Here’s the same 0 width and height (and 0 line-height for IE) square as above except the top and left borders have been set to a color of white to match the background of the page and the bottom and right borders have been set to green. Are you beginning to see the potential?


<div id="triangle"></div>

div#triangle {
width:0; height:0;
line-height:0;
border-top:100px solid #fff;
border-right:100px solid #AAC32B;
border-bottom:100px solid #AAC32B;
border-left:100px solid #fff;
}


By adding a width to the div, you can begin to make trapezoidal shapes. Adding a width of 100px to the box above results in:


<div id="trapezoid"></div>

div#trapezoid {
width:100px; height:0;
line-height:0;
border-top:100px solid #C2762B;
border-right:100px solid #AAC32B;
border-bottom:100px solid #C2C2C2;
border-left:100px solid #3D3D3D;
}


Until now I’ve been using the same width for all of the borders, but we can have a little more fun giving each border a different width.


<div id="trapezoid2"></div>

div#trapezoid2 {
width:100px; height:0;
line-height:0;
border-top:100px solid #C2762B;
border-right:50px solid #AAC32B;
border-bottom:250px solid #C2C2C2;
border-left:75px solid #3D3D3D;
}


With css alone we are somewhat limited in what shapes we can create, but if you experiment a little by varying border widths and colors and the width of the div you can create more interesting shapes. Even better by using multiple divs next to each other you can start to create even more interesting shapes. Have a look at Information on Border Slants and towards the bottom of the page you can see some of what you can do using css borders on multiple divs.

Follow some of the links on the page too for some examples of where this simple technique can lead, especially the example that use JavaScript. My favorite is Sweet Heart which combines the techniques above with JavaScript to create some pretty impressive curves. Use enough divs of varying size and you can approximate a curve pretty well.

The css3 spec actually allows for curves with the border-radius property, but given the lack of support in Internet Explorer we won’t be able to use the property for quite some time. I’m not sure if IE 7 will include support for border-radius, but even if it does people will still be using pre IE7 versions for awhile.

So there’s an introduction into creating shapes with css borders. My own project has only made limited use of them, but with a little imagination and maybe some JavaScript added to the mix you can create some fairly interesting and complex shapes.

« Prev PostNext Post »

Download a free sample from my book, Design Fundamentals.