Hit enter after type your search item
Home / CSS / How to create CSS triangles: 4 demos in all directions

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 that just requires using the 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 as using this method. Have a look at the demo and code:

CSS triangle

See online demo and code

The CSS:


 

The markup:


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 which arrow is directed to the left. Have a look:

CSS triangle left

See online demo and code

The CSS code:

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 border-bottom is given the desired color:

CSS triangle up

See online demo and code

The CSS:


 

A demo with down triangle

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

CSS triangle down

See online demo and code

This is how the CSS is used in the example:


 

See the demo and get the complete code by clicking the images or respective links.

This div height required for enabling the sticky sidebar