CSS Arrow

First create some divs.

HTML markup

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

CSS

Create box with 0 height and 0 width. The arrow's height and width will be set by the border width property.

.up-arrow {
	width: 0; 
	height: 0; 
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;	
	border-bottom: 10px solid #117300;
}
.down-arrow {
	width: 0; 
	height: 0; 
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-top: 15px solid #006699;
}
.left-arrow {
	width: 0; 
	height: 0; 
	border-top: 25px solid transparent;
	border-bottom: 25px solid transparent; 	
	border-right: 25px solid #117300; 
}
.right-arrow {
	width: 0; 
	height: 0; 
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;	
	border-left: 20px solid #006699;
}

Demo »


Go Daddy


Related articles

Vecteezy - Free Vector Art

Vecteezy - Free Vector Art

05/08/2016

If you need Free Vector Art do not hesitate: visit Vecteezy.com

Free vector icons

Free vector icons

31/01/2016

Want to have some vector icons, free? Try this nice website.

Beautiful free stock photos from StockSnap

Beautiful free stock photos from StockSnap

11/12/2015

Would you like some cool stock photos for free? Check out this article, and try this website.


Leave a comment

We welcome any comment from you! Please keep in mind that comments are moderated and rel='nofollow' is in use. So, please do not use a domain as your name or a spammy keyword, or your comment will be deleted.

Name: *

E-mail: *

Message: *

Click on the flower *


Find us on Facebook

Tags

Get online with the world's Best - GoDaddy.com!

Back to Top