Creating triangles using CSS






CSS has evolved over the years and with the relatively new CSS3 it’s becoming more and more interesting. Here I’m going to show how you can create a simple triangle by just setting CSS rules. It basically works like this:

  • The conceptual model here is a squared box that will be filled with colours. What colours depends on the CSS settings.
  • Define the size of the main div as 0px. We’re not interested in the div itself but in the borders that surround it.
  • You can’t set the border size directly. Instead you set the border distance from the zero-sized div to the outer side. If you want the bottom to be 200px wide you’ll have to set the left and right border width to the total of 200px
  • Set a colour of the borders that needs to be coloured and set transparent on the borders that need to remove colour. Without at least one transparent border the whole box will be filled with the border colour.
  • All border properties used are set in the following order: top, right, bottom, left.

Example 1
We start with a simple example to see how the borders behave when working together and all four borders are set with their own colour.

#MyTriangle{
  width: 0px;
  height: 0px;
  border-style: solid;
  /* top, right, bottom, left */
  border-width: 100px 100px 100px 100px;
  border-color: green red blue yellow;
}

And this is what it’ll look like. We can already here see the different triangles. The div is in the middle, but invisible since it’s 0px in size.
Multi coloured box

Example 2
Now lets extend the example from above and remove two of the borders by setting them to 0. The borders we keep are bottom and left leaving the div in the upper right corner.

#MyTriangle{
  width: 0px;
  height: 0px;
  border-style: solid;
  /* top, right, bottom, left */
  border-width: 0 0 200px 200px;
  border-color: green red blue yellow;
}

It’ll then look like this. Notice that we left the green and red colours in the CSS definition but they didn’t affect the triangle since their borders were set to 0.
Blue and yellow box

By replacing yellow with transparent we can make it a blue triangle.
Blue triangle

Example 3
In this example we’ve removed only the top border.

#MyTriangle{
  width: 0px;
  height: 0px;
  border-style: solid;
  /* top, right, bottom, left */
  border-width: 0 200px 100px 100px;
  border-color: transparent red blue green;
}

The result looks like this with the div in the middle at the top.
Multi coloures box

And if we just replace red and green with transparent it’ll look like this:
Blue triangle






CSS3 Transformations
There are some limitations to making a triangle like this only using border properties:

  1. The triangle can’t be tilting. It’s based upon a straight box and at least one of the sides has to fill one of the sides of the box.
  2. The top of the triangle (opposite of the base) can never reach outside the bottom corners.

To deal with that you can add some transformations. These transformations used below are CSS3 specific and may not work in old browsers, but with the use of browser prefixes you’ve covered up quite well.

Rotation
This example rotates the triangle thus helping us with limitation 1 (that we have to fill one of the straight borders of the box)

#MyTriangle{
  width: 0px;
  height: 0px;
  border-style: solid;
  /* top, right, bottom, left */
  border-width: 0 200px 100px 100px;
  border-color: transparent red blue green;
}
.rotate20
{
  transform: rotate(20deg);
  -ms-transform: rotate(20deg); /* IE 9 */
  -moz-transform: rotate(20deg); /* Firefox */
  -webkit-transform: rotate(20deg); /* Safari and Chrome */
  -o-transform: rotate(20deg); /* Opera */
}

The result then looks like this
Rotated triangle
Skewing
With the help of skewing we can deal with limitation 2 (that the top point of the triangle can’t reach outside the base corners).

#MyTriangle{
  width: 0px;
  height: 0px;
  border-style: solid;
  /* top, right, bottom, left */
  border-width: 0 0 100px 100px;
  border-color: transparent transparent blue transparent;
}
.skew
{
  transform: skew(-30deg,0deg);
  -ms-transform: skew(-30deg,0deg); /* IE 9 */
  -webkit-transform: skew(-30deg,0deg); /* Safari and Chrome */
  -o-transform: skew(-30deg,0deg); /* Opera */
  -moz-transform: skew(-30deg,0deg); /* Firefox */
}

And the result would look like this
Skewed triangle