Chrome 2
Firefox 3
Internet Explorer 6
Internet Explorer 7
Internet Explorer 8
Opera 9
Safari 4
The border slant is observed long before I've written this test page, and I've borrowed knowledge, ideas and inspiration from them:
Let's start with the simple examples first. You will observe that at the sides of the box, the intersection of two borders give you a slanted line.
And now, we'll vary the border-width of each border.
It's getting obvious how we can create triangles, right? We can use border-color: transparent, but do note that it's not a valid CSS property. A workaround will be using the same colour as the background, for this page, we'll use border-color: #fff. However, a disadvantage of this valid property is that it cannot be displayed over a dynamic background.
From the example above, we can see that by varying border widths we can alter the shape of the triangle to our liking. To create basic shapes which we will then assemble into larger pieces (see Regular Polygons below), we can vary the width and height of the boxes to create trapziums. Oh, and try taking this as an exercise: try jogging your memory and use your visualisation to image how you would create the below images before checking the source code how it is done. It helps!
For certain shapes that cannot be modelled by using only a single <div> element, we can place them in a container, float each individual <div> and clear the float as of when needed. For example, if I am floating all the <div>s to the left using float: left, then I will have to clear the float by using clear: left when I'm done. It's as simple as that. This technique is also demonstrated in the Regular Polygons section.
Let's say we want to assemble a rotated rectangle. We can actually assemble it using five <div> elements as seen on your left (and yes, it is not an image but rendered by your browser from HTML and CSS). Four <div>s are absolutely positioned around a middle <div>, which covers the remaining area of the rectagle the former 4 fail to cover. With careful calculation, it is possible to assemble almost any shape you want to. It helps a lot to draw your intended image on a piece of paper beforehand to get a clear idea how to dissect the images.
The stop sign is a regular, red octagon with white text in the middle. To assemble an octagon (click on the shape to reveal sectioning), what we need is to vertically sandwich a rectangle in the middle of two trapeziums. The trapezium at the top is defined by a left and right border with an identical colour with the background colour of the image container, with a bottom-border with a red background colour. Constructing any octagon is easy and can be done with the steps above. However, constructing regular polygons are not easy because they involve calculations. For the exact dimensions of border widths, refer to the Regular Polygons section below.
Here is a Christmas tree assembled from a triangle, a rectange as the stump and the rest, trapeziums. The width of each <div> element increases down from the top, and the border-width also increases to give a curved spread of the leaves downwards. The margin-left attribute will also have to be calculated carefully so that each layer will remain centered. It is amazing that you can create graphics like this without relying on any image editing programs. Plus, you don't have to force your user to slough through the downloading part as well.
'Hey, I realised that certain shapes can be made alternatively!' You're perfectly right. Due to the nature of diagonals, there is often more than one ways to make it. Consequently, there is also more than one ways to construct a shape that you desire.
As seen on the left, the three shapes are identical. However, in the coding sense, they are quite different from each other. It depends on where the actual <div> is positioned - the actual position of the <div> element where the border wraps around is indicated by the red dots. In the first triangle, the <div>is on the bottom left corner - therefore we extend the left border to create a triangle.
The shapes below approximate the exact dimensions of a true regular polygon. You can feel free to use the border width proportions below to construct your own polygons. All the regular polygons below have a common width of 100px, while the height varies within a few pixels from 100px. To scale the polygons, simply scale all the border widths by the same factor.
However, one limitation is that we cannot further subdivide individual pixels (there's no such thing as border-width: 63.397px anyway).
On a completely unrelated note, as the number of edges increases, the coding part gets increasingly complex , until it is impractical and impossible to draw a circle unless we use the border-radius attribute. Note: a circle is a polygon with infinite number of edges.
We shall compare how major browsers fare when it comes to anti-aliasing the border slants.
| Browsers \ Boxes | Box 1 | Box 2 | Box 3 |
|---|---|---|---|
| Chrome 2 |
|
|
|
| Firefox 3 |
|
|
|
| Internet Explorer 6 |
|
|
|
| Internet Explorer 7 |
|
|
|
| Internet Explorer 8 |
|
|
|
| Opera 9 |
|
|
|
| Safari 4 |
|
|
|
Looks like for the moment being, Firefox 3.5 is the one doing the job only. Google Chrome 2 tried hard to anti-alias the border slants, but ended up adding contrast to the edges. For Internet Explorer 8, Opera 9 and Safari 4, they need to do something about the anti-aliasing.
This may be frowned upon by semantics purists. This is just a demonstration that how we can use it, so take it easy, folks!
Here is a non-exhausive list of the possible applications of the CSS triangles:
↓ Implementation code and instructions↑ Hide
↓ Implementation code and instructions↑ Hide
XHTML:
<ul>
<li><span class="bullet">»</span><span class="content">...</span></li>
</ul>CSS: to ensure uniform appearance across different text sizes, we will be using 'em' instead of 'px' to define the dimensions
ul {
list-style: none;
}
ul li {
clear: both;
}
ul li span.bullet {
border-top: 0.3em solid #ffffff;
border-right: 0;
border-bottom: 0.3em solid #ffffff;
border-left: 0.4em solid #173755;
float: left;
margin-top: 0.35em;
text-indent: -9999px;
width: 0;
height: 0;
}
ul li span.content {
display:block;
padding: 0 0 0 0.9em;
}You can even use this technique to create a purely CSS page fold without using any images:
↓ Implementation code and instructions↑ Hide
XHTML:
<div class="post_title"><h3>Post title</h3><span class="pagefold"></span></div>CSS:
div#pagefold_header {
margin: 0;
padding: 6px 5px 6px 15px;
position: relative;
}
div#post_title h3 {
margin: 0 6px;
padding: 0;
width: 100%;
}
div#post_title span.pagefold {
background: #000000;
border-top: 0;
border-right: 0;
border-bottom: 15px solid #a1b9d2;
border-left: 15px solid #ffffff;
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 0;
height: 0;
z-index: 100;
}<div>s to work in IE6 (circumventing the weird IE empty <div> bug), use font-size: 0; line-height: 0; overflow: hidden;It's perfectly fine that you don't understand a single thing written on this page. You can always contact me for details! You can also request for other CSS tutorials, I will post them as soon as I have time.
This page is XHTML and CSS Valid | This page is loaded within 0.37seconds.