How to create CSS Triangles: 4 Demos in all Directions

Creating pure CSS triangles

In this tutorial, I am going to show how you may create CSS-based triangles in your web projects. You may use these for different purposes including showing the direction of content or for the geometrical reason.

The process is quite simple for creating the triangle which just requires using the CSS border properties with appropriate property values.

See the following section for seeing the live demos of triangles in all directions.

A demo of creating right direction triangle CSS

For creating the right-direction triangle, simply use a div element and assign it a CSS class that contains border properties. Amazingly, you need to specify all borders except the right one separately while using this method. Have a look at the demo and code:

CSS triangle

The CSS:

.demo-triangle-css {

  border-left: 100px solid #408080;

  border-top: 50px solid transparent;

  border-bottom: 50px solid transparent;

}

The markup:

<div class="demo-triangle-css"></div>

Note: You may also use <p> tag instead of <div>.

An example with left direction triangle

Opposite to the above example, this time, the border-right property is used for creating a triangle in which the arrow is directed to the left. Have a look:

CSS triangle left

CSS code:

.demo-triangle-css {

  border-top: 100px solid transparent;

  border-bottom: 100px solid transparent;

  border-right: 200px solid #408080;

  width: 0px;

  height: 0px;

}

A demo with up direction

Now, the border-top is not used for creating the triangle with up-direction. The border-left and border-right are kept transparent while the border-bottom is given the desired color:

CSS triangle up

The CSS:

.demo-triangle-css {

  border-left: 100px solid transparent;

  border-right: 100px solid transparent;

  border-bottom: 200px solid #400000;

  width: 0px;

  height: 0px;

}

A demo with down triangle

Just like the right and left directions, use the border-top for the down triangle. Have a look:

CSS triangle down

This is how the CSS is used in the example:

.demo-triangle-css {

  border-left: 100px solid transparent;

  border-right: 100px solid transparent;

  border-top: 200px solid #400000;

  width: 0px;

  height: 0px;

}