CSS Arrows without images

Published 20 Nov by SuperNOVA

CSS Arrows without imagesIn 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: 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. 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.