Triangles can be made easily using CSS also without any images. This trick requires only div tags and some CSS works. To get this trick, just use the code below.

The HTML 

&lt;div&nbsp;class=&quot;arrow-up&quot;&gt;&lt;/div&gt;<br />&lt;div&nbsp;class=&quot;arrow-down&quot;&gt;&lt;/div&gt;<br />&lt;div&nbsp;class=&quot;arrow-left&quot;&gt;&lt;/div&gt;<br />&lt;div&nbsp;class=&quot;arrow-right&quot;&gt;&lt;/div&gt;

These div tags should be used as a base for the triangles. Then the below CSS styling should be done.

The CSS

<code>.arrow-up&nbsp;{<br />&nbsp; &nbsp; &nbsp; &nbsp; width:&nbsp;0;<br />&nbsp; &nbsp; &nbsp; &nbsp; height:&nbsp;0;<br />&nbsp; &nbsp; &nbsp; &nbsp; border-left:&nbsp;5px&nbsp;solid transparent;<br />&nbsp; &nbsp; &nbsp; &nbsp; border-right:&nbsp;5px&nbsp;solid transparent;<br /><br />&nbsp; &nbsp; &nbsp; &nbsp; border-bottom:&nbsp;5px&nbsp;solid black;<br />}<br /><br />.arrow-down&nbsp;{<br />&nbsp; &nbsp; &nbsp; &nbsp; width:&nbsp;0;<br />&nbsp; &nbsp; &nbsp; &nbsp; height:&nbsp;0;<br />&nbsp; &nbsp; &nbsp; &nbsp; border-left:&nbsp;20px&nbsp;solid transparent;<br />&nbsp; &nbsp; &nbsp; &nbsp; border-right:&nbsp;20px&nbsp;solid transparent;<br /><br />&nbsp; &nbsp; &nbsp; &nbsp; border-top:&nbsp;20px&nbsp;solid&nbsp;#f00;<br />}<br /><br />.arrow-right&nbsp;{<br />&nbsp; &nbsp; &nbsp; &nbsp; width:&nbsp;0;<br />&nbsp; &nbsp; &nbsp; &nbsp; height:&nbsp;0;<br />&nbsp; &nbsp; &nbsp; &nbsp; border-top:&nbsp;60px&nbsp;solid transparent;<br />&nbsp; &nbsp; &nbsp; &nbsp; border-bottom:&nbsp;60px&nbsp;solid transparent;<br /><br />&nbsp; &nbsp; &nbsp; &nbsp; border-left:&nbsp;60px&nbsp;solid green;<br />}<br /><br />.arrow-left&nbsp;{<br />&nbsp; &nbsp; &nbsp; &nbsp; width:&nbsp;0;<br />&nbsp; &nbsp; &nbsp; &nbsp; height:&nbsp;0;<br />&nbsp; &nbsp; &nbsp; &nbsp; border-top:&nbsp;10px&nbsp;solid transparent;<br />&nbsp; &nbsp; &nbsp; &nbsp; border-bottom:&nbsp;10px&nbsp;solid transparent;&nbsp;<br /><br />&nbsp; &nbsp; &nbsp; &nbsp; border-right:10px&nbsp;solid blue;<br />}</code>

What they do here is, only one border of the div is show and the other borders are made transparent. Also the show border is made bigger. This small trick creates CSS triangles.

Demo

http://jsfiddle.net/vaakash/MyGNQ/