How to create CSS triangles?

CSS3 triangles with transform rotate

Triangular shape is pretty easy to make using this technique. For people who prefer to see an animation explaining how this technique works here it is :

gif animation : how to make a triangle with transform rotate

Otherwise, here is detailed explanation in 4 acts (this is not a tragedy) of how to make an isosceles right-angled triangle with one element.

  • Note 1 : for non isosceles triangles and fancy stuff, you can see step 4.
  • Note 2 : in the following snippets, the vendor prefixes aren't included. they are included in the codepen demos.
  • Note 3 : the HTML for the following explanation is always : <div class="tr"></div>

STEP 1 : Make a div

Easy, just make sure that width = 1.41 x height. You may use any techinque (see here) including the use of percentages and padding-bottom to maintain the aspect ratio and make a responsive triangle. In the following image, the div has a golden yellow border.

In that div, insert a pseudo element and give it 100% width and height of parent. The pseudo element has a blue background in the following image.

Making a CSS triangle with transform roate step 1

At this point, we have this CSS :

.tr {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
}

.tr: before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0079C6;
}

STEP 2 : Let's rotate

First, most important : define a transform origin. The default origin is in the center of the pseudo element and we need it at the bottom left. By adding this CSS to the pseudo element :

transform-origin:0 100%; or transform-origin: left bottom;

Now we can rotate the pseudo element 45 degrees clockwise with transform : rotate(45deg);

Creating a triangle with CSS3 step 2

At this point, we have this CSS :

.tr {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
}

.tr:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0079C6;
    transform-origin: 0 100%;        
    transform: rotate(45deg);
}

STEP 3 : hide it

To hide the unwanted parts of the pseudo element (everything that overflows the div with the yellow border) you just need to set overflow:hidden; on the container. after removing the yellow border, you get... a TRIANGLE! :

DEMO

CSS triangle

CSS :

.tr {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
    overflow: hidden;
}

.tr:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0079C6;
    transform-origin: 0 100%;
    transform: rotate(45deg);
}

STEP 4 : go further...

As shown in the demo, you can customize the triangles :

  1. Make them thinner or flatter by playing with skewX().
  2. Make them point left, right or any other direction by playing with the transform orign and rotation direction.
  3. Make some reflexion with 3D transform property.
  4. Give the triangle borders
  5. Put an image inside the triangle
  6. Much more... Unleash the powers of CSS3!

Why use this technique?

  1. Triangle can easily be responsive.
  2. You can make a triangle with border.
  3. You can maintain the boundaries of the triangle. This means that you can trigger the hover state or click event only when the cursor is inside the triangle. This can become very handy in some situations like this one where each triangle can't overlay it's neighbours so each triangle has it's own hover state.
  4. You can make some fancy effects like reflections.
  5. It will help you understand 2d and 3d transform properties.

Why not use this technique?

  1. The main drawback is the browser compatibility, the 2d transform properties are supported by IE9+ and therefore you can't use this technique if you plan on supporting IE8. See CanIuse for more info. For some fancy effects using 3d transforms like the reflection browser support is IE10+ (see canIuse for more info).
  2. You don't need anything responsive and a plain triangle is fine for you then you should go for the border technique explained here : better browser compatibility and easier to understand thanks to the amaizing posts here.