CSS Arrows Without Images

In website design, many times we have to use arrows with elements. Today we will learn how to create these arrows using only CSS, without any images.

For this purpose, you can use any element like span, div etc. For example:

<div class="main" >
Some text here!
<span class="arrow" >&nbsp;</span>
</div>

Some text here!

</div>

Here, div.main is the parent element and span.arrow will be the arrow(du’uh!). The CSS that will beautify the HTML will be as such.

div.main{
position: relative;
background: #fa720e;
border-radius: 5px;
padding: 10px;
text-align: center;
width: 150px;
color: white;
font-weight: bold;
}
div.main span.arrow{
position:absolute;
left:45%;
bottom:-5px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid #fa720e;
font-size:0px;
line-height: 0px;
}

div.main{

position: relative;

background: #fa720e;

border-radius: 5px;

padding: 10px;

text-align: center;

width: 150px;

color: white;

font-weight: bold;

}

div.main span.arrow{

position:absolute;

left:45%;

bottom:-5px;

border-left:5px solid transparent;

border-right:5px solid transparent;

border-top:5px solid #fa720e;

font-size:0px;

line-height: 0px;

}

The important points here are:

The position of the parent element should be relative, in order to position the arrow relative to the parent.
The arrow elements should have 3 borders total, 2 parallel borders(left and right here) with transparent colors.
The third border’s color will decide the background of the arrow element.
The direction of the arrow can be changed by the third border(here top).

Here is what the above code should render:

DEMO

Some text here!

If you have any better method or any comments for the above, please share.