Do you know that you can easily create a triangle without using any image? You can use CSS styling to create triangle with up, down, left and right directions easily. Here is how you do so:

First of all, we will need a div element which will be styled into a triangle later.

<div class="triangle"></div>

The idea is a box with zero width and height. The actual width and height of the arrow is determined by the width of the border. In an up arrow, for example, the bottom border is colored while the up, left and right are transparent, which forms the triangle. The CSS which form the triangle is as followed:

div.triangle {
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid black;

Now we will have an up arrow triangle like this:

You can change the color of the triangle by adjusting the border color of the div element. You can also change the size of the triangle by adjusting the border width.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s