CSS Triangles

You can easily make css triangles with css border technique. Below CSS and HTML will give you a sharp triangle without any images. It is also supported on Internet Explorer 7.

css


.arrow-up {
	width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	
	border-bottom: 20px solid black;
}

.arrow-right {
	width: 0; 
	height: 0; 
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	
	border-left: 20px solid green;
}

.arrow-down {
	width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	
	border-top: 20px solid #f00;
}

.arrow-left {
	width: 0; 
	height: 0; 
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent; 
	
	border-right:20px solid blue; 
}

HTML


<div class="arrow-up"> </div>
<div class="arrow-right"> </div>
<div class="arrow-down"> </div>
<div class="arrow-left"> </div>

DEMO

Published by Santosh Shah

My name is Santosh Shah and blogs at santosh-shah.com

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.