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.
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: Borders - An experiment with border widths.
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!
this is freaking cool!
OMFG – I had no idea this was possible!
I had no idea this is possible before reading your post!
It’s really fascinating to know what CSS can do and the Christmas tree is one cool trick! But I’ve to say, I’ll still prefer using images rather than CSS even for the small arrows. It’s kind of troublesome to add more classes etc. to the HTML.
I agree that it may reduces loading time due to the lack of images but then again, more HTML codes and CSS are being loaded on the page which in turns also increases the loading time (although not as much as images).
This may work for simple shapes but I think we can do a lot more with images. There are still certain graphical effects that cannot be done with CSS and with the cross browser issue, isn’t it simpler to work with images? :)
I may have a different viewpoint in regards to implementing this but this is a very well-written tutorial and article! :)
Thank you for sharing your insights, Dayna :) your comment is really appreciated, thanks!
While I generally do not recommend assigning classses and/or ids to individual
<div>elements because it will make cross referencing a big headache (imaging running back and forth, checking the classes and then scanning for that particular<div>element), it will be easier to create images using inline CSS styles. Of course, you’re right about the fact that it will add additional bulk to the code, but compared to an image, the raw CSS code itself is pretty smal.Formats like .gif and .png are good contenders of the CSS style of creating images because of their ability to compress huge areas of uniform colour. In addition, it is semanically incorrect to use
<div>to create images as well :) heheh.Simpler shapes can be easily done by using CSS image, but when the image gets complicated, I agree with you that falling back to conventional image formats is the most feasible and sensible way. No one would want to toil hours away at the computer figuring out the dimensions of a
<div>element that makes up part of a very complicated image.Thanks for the compliments!
Woah, amazing! I never heard about this before and gosh, COOL!
Simply amazing the things that we can do with border width. Definitely changed the way I think of border widths. The x’mas tree is great. Maybe can implement it on one of my sites next x’mas.
Excellent post. :)
this is WHAT THE HELL! you’re very interesting in unique stuff…..
Thank you very much for this. I learned another new thing today! Haha xD