Hello there. I am Terry and I am a full-time undergraduate based in Singapore. I take photos, write a blog and design websites.

And no, I'm not a teddy bear.

Borders – An experiment with border widths

After reading the fantastic writeups about manipulating CSS borders to create graphics that are impossible with grid-like elements on Slantastic and Border Slants, I was inspired to do a simply followup demo page on the capabilities of CSS borders. I started working on this secret, clandestine page on my domain since half a year ago but I didn’t had enough time to complete everything. Finally came my long-awaited semester break, when I can devote a day’s time to finish this demo page.

You can view the demo page here. Do not right click on the link, simply do a click-through.
[download id=”10″ format=”2″]

Borders - An experiment with border widths

Borders - An experiment with border widths

The visual elements shown in the remainder of this post will be drawn purely using CSS only – not images. Feel free to dissect the code for reference. It helps a lot if you can try imagining how you would want to construct a specific shape before referring to the source code to see how it is done.

The Basics

The principle behind creating custom shapes using border is the interface between two borders:

By increasing the border-width, the slant becomes more apparent. We can manipulate each of the border-widths to create the gradient that we want as well.

Triangles and Trapeziums

It becomes clear that we can create triangles and trapeziums based on the observation of such behaviours at the interface of two borders.

Trapeziums are possible too, if we increase the width of the empty <div> from zero to a positive numerical value:

Regular Polygons

Creating regular polygons require some calculation. Their parameters can be found in the source code, and you can scale the border-width and width properties in order to scale the entire polygon proportionately.

From left to right, we have triangle (trigon), quadrilateral (tetragon), pentagon, hexagon and heptagon. The demo page will have more regular polygons, up to decagon.

Creating Graphics

For more examples, refer to the demo page: [download id=”10″ format=”3″].

One advantage of creating visual elements using CSS (and in this case, CSS borders) is that your visitors will not have to download images that are huge. Of course, this technique is usually experimental because certain image extensions such as .png and .gif will greatly reduce the size of images (given certain conditions) and that it is sometimes not feasible to code an image from ground up.

What you see on the left is one of the examples demonstrated on the demo page. The Christmas tree is actually constructed from 10 <div> elements vertically stacked on top of each other. The topmost <div> has its borders modeled after a triangle, while subsequent <div>s have their borders modeled after trapeziums. Their border-width, margin and width has been adjusted so as to give the tree a tapered out look towards the bottom. I finished off the tree with a brown stump made from a single <div> again.

And there you go – the code for the lovely, purely CSS Christmas tree (all encoded in inline CSS so that you can understand how it works – and for the sake of clarity). Do remember to wrap it around a box with a defined width.

<div style="margin: 0 auto; font-size: 0; line-height: 0; border-left: 10px solid #fff; border-bottom: 20px solid #238229; border-right: 10px solid #fff; float: none; margin-left: 90px; width: 0;"></div>
<div style="margin: 0 auto; font-size: 0; line-height: 0; border-left: 10px solid #fff; border-bottom: 20px solid #238229; border-right: 10px solid #fff; float: none; margin-left: 86px; width: 8px;"></div>
<div style="margin: 0 auto; font-size: 0; line-height: 0; border-left: 14px solid #fff; border-bottom: 20px solid #238229; border-right: 14px solid #fff; float: none; margin-left: 78px; width: 16px;"></div>
<div style="margin: 0 auto; font-size: 0; line-height: 0; border-left: 18px solid #fff; border-bottom: 20px solid #238229; border-right: 18px solid #fff; float: none; margin-left: 68px; width: 28px;"></div>
<div style="margin: 0 auto; font-size: 0; line-height: 0; border-left: 22px solid #fff; border-bottom: 20px solid #238229; border-right: 22px solid #fff; float: none; margin-left: 56px; width: 44px;"></div>
<div style="margin: 0 auto; font-size: 0; line-height: 0; border-left: 26px solid #fff; border-bottom: 20px solid #238229; border-right: 26px solid #fff; float: none; margin-left: 42px; width: 64px;"></div>
<div style="margin: 0 auto; font-size: 0; line-height: 0; border-left: 30px solid #fff; border-bottom: 20px solid #238229; border-right: 30px solid #fff; float: none; margin-left: 26px; width: 88px;"></div>
<div style="margin: 0 auto; font-size: 0; line-height: 0; border-left: 34px solid #fff; border-bottom: 20px solid #238229; border-right: 34px solid #fff; float: none; margin-left: 8px; width: 116px;"></div>
<div style="margin: 0 auto; font-size: 0; line-height: 0; background-color: #6e3912; border-right: 2px solid #ac5f26; margin-left: 92px; width: 14px; height: 40px;"></div>

One may also explore other options of using CSS borders in creating visual elements – for example, you can use jQuery insert the necessary code into the start of list items, bulleting each item with a tiny triangle created by CSS borders. Of course, this method will be frown upon by semantics purists, but I’m going to leave the discussion open.

Credits, Resources & References

I would like to thank the genius designers who conceived the idea of creating custom shapes using border slants. It never came across my mind until I read Slantastic and Border Slants. I have also learned how to code for border slants from there too.

There are several aspects of the application of border slants that I fail to cover in this article and my demo page. The reason is simple – because they have been done before and little follow-up is needed. Try checking the two links above – they provide intricate explanation on how wrapping text around a diagonal shape is possible. Go figure!

There are a lot more techniques and ideas that I have included in the demo page. I did not include them in this article to keep it short and palatable :)

Your thoughts?

What are your thoughts on the manipulation of CSS borders and their applicability? If you have any questions regarding the demo page, feel free to post your questions in the comments below. I will be more than happy to help!

Be Sociable, Share!

Burn after reading » Now you're done reading. What's next?

Random

Related posts that might interest you:

Popular

Posts that are popular among visitors: