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:
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 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:
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:
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; }