Using borders to produce angled shapes
This is a suppliment to the tutorial, and is here only for illustrative purposes. It is not part of the main tutorial.
These examples will not work in Netscape 4 or WebTV, because they do not allow you to define individual borders, or Escape because it does not handle borders correctly. Internet explorer 4 and 5 may have trouble with some of the examples due to their problems with the box model.
Note that these examples are based on you using the default 'Moosified' style for this page, where the background colour of the body is #f6f6f6. If you use the other styles, the shapes may not work correctly.
Thick borders
If all four borders are defined as being thick, they should be tapered into each other:
border-top: 20px solid red;
border-bottom: 20px solid #fc0;
border-left: 20px solid blue;
border-right: 20px solid green;MultiColour Square
All of these examples are done using a <div> element, with no contents:
<div style="style declarations"></div>The lack of contents makes all points sharp. Some browsers still leave space for the non-existent contents, so we can remove that space by using the following combination of styles:
font-size: 0px; line-height: 0%; width: 0px;
border-top: 20px solid red;
border-bottom: 20px solid #fc0;
border-left: 20px solid blue;
border-right: 20px solid green;Right side of MultiColour square
If we do not define a border, the other borders stop abruptly, and do not taper into the space that would be used by that border:
font-size: 0px; line-height: 0%; width: 0px;
border-top: 20px solid red;
border-bottom: 20px solid #fc0;
border-left: none;
border-right: 20px solid green;Top-right corner side of MultiColour square
We get a similar effect by removing two borders:
font-size: 0px; line-height: 0%; width: 0px;
border-top: 20px solid red;
border-bottom: none;
border-right: 20px solid green;One part of the top-right corner side of MultiColour square
By making one of the two remaining borders the same colour as the background, we are left with a sloping triangle:
font-size: 0px; line-height: 0%; width: 0px;
border-top: 20px solid red;
border-right: 20px solid #f6f6f6;Or a longer version
Increasing the width makes a longer bar - Note, Microsoft Internet Explorer 4 and 5 take the width as being the full length, including the sloping part, so they cannot display this example. Other browsers take the width as excluding the border, so not the sloping part:
font-size: 0px; line-height: 0%; width: 100px;
border-top: 20px solid red;
border-right: 20px solid #f6f6f6;Right side of MultiColour square with right border thicker
If we increase the width of the side border, we get a sharper triangle, which is made sharper by being longer:
font-size: 0px; line-height: 0%; width: 0px;
border-top: 20px solid red;
border-bottom: 20px solid #fc0;
border-right: 40px solid green;Right side of MultiColour square with right border thicker and top and bottom borders thinner
If we decrease the size of the top and bottom borders, we can make the triangle even narrower and sharper:
font-size: 0px; line-height: 0%; width: 0px;
border-top: 10px solid red;
border-bottom: 10px solid #fc0;
border-right: 40px solid green;Various shapes
By using these various techniques, and setting some of the border colours to the same as the background, we can create a variety of different arrow-based shapes
Down arrow
font-size: 0px; line-height: 0%; width: 0px;
border-top: 20px solid #77c;
border-left: 10px solid #f6f6f6;
border-right: 10px solid #f6f6f6;Up arrow
font-size: 0px; line-height: 0%; width: 0px;
border-bottom: 20px solid #77c;
border-left: 10px solid #f6f6f6;
border-right: 10px solid #f6f6f6;Left arrow
font-size: 0px; line-height: 0%; width: 0px;
border-top: 10px solid #f6f6f6;
border-right: 20px solid #77c;
border-bottom: 10px solid #f6f6f6;Right arrow
font-size: 0px; line-height: 0%; width: 0px;
border-top: 10px solid #f6f6f6;
border-left: 20px solid #77c;
border-bottom: 10px solid #f6f6f6;Hourglass
font-size: 0px; line-height: 0%; width: 0px;
border-top: 20px solid #77c;
border-left: 10px solid #f6f6f6;
border-right: 10px solid #f6f6f6;
border-bottom: 20px solid #77c;Sideways hourglass
font-size: 0px; line-height: 0%; width: 0px;
border-left: 20px solid #77c;
border-top: 10px solid #f6f6f6;
border-bottom: 10px solid #f6f6f6;
border-right: 20px solid #77c;Combining shapes
The div elements can even detect mouse events, so you could use this as a game controller ... just a thought.
This could be done using CSS positioning, but I have used tables here
How about this curve, it is created using the sloping edge technique with stacked floats of various sizes. The length of the div is increased with each float, and the slope is changed by manipulating the thicknesses of the visible bottom and invisible right borders.
Here, the text flows along the edge of the curve in all browsers that can handle borders properly.
Many browsers will float the curve too close to the text so some of the text covers it. To compensate I have included a margin-right style on each div element that increases in lower lines.
Take this for example.
Each line of text floats further and further to the right as is flows down the edge. Most browsers only consider the top-left corner of the text when positioning against the margin, so sharp slopes may still show the problem. Opera considers all parts of the text, so it does not suffer from this.
Using clear, you can place content under the slope, and guarantee it will always be under it, no matter how wide the window gets.
Last modified: 4 September 2008