CSS Arrows (Up, Down, Left and Right Triangle)

Posted on April 8, 2015 by Dan Doicaru in HTML/CSS Category with Easy Difficulty

Using CSS arrows instead of images is a better choice. Why? Because you need just some few lines of code, you don't create a request for loading another file like you do with images and the best part is that you can create even triangle css arrows with a right angle.

To create these css arrows  you will need any container such as <div> or <a> with relative positioning. You can even add css arrow to <ul> if you have a sub-menu. The trick is to add :after or :before pseudo elements with absolute position to place the arrow outside the main container.

How CSS Arrows Work

If you create a div and write all border with different colors, you will see how css arrows works. Here is an image how borders are created. This is just a simple div with 20 pixels border, each with different color.

CSS Arrows from Borders Explained

As you can see in the image above, if only one border is set with a color and the rest are set with transparent color and same size, border will expand as a triangle. That's how css arrows are created.

Full HD Video Tutorial

Up / Top CSS Arrows

First I will show you how to create css arrows using links as containers. This will include the :hover state too, so check the html below.

<a href="#" class="up-arrow">Button with Up Arrow</a>

Now the CSS. Do not forget to add relative position on main container which is the <a> tag. Also take a look how arrow was created with :after pseudo element.

a.up-arrow {
	display: inline-block;
	position: relative;
	background: green;
	color: #FFF;
	text-decoration: none;
	padding: 20px;
}
a:hover.up-arrow {
	background: brown;
}
a.up-arrow:after {
	content: '';
	display: block;  
	position: absolute;
	left: 20px;
	bottom: 100%;
	width: 0;
	height: 0;
	border-bottom: 10px solid green;
	border-top: 10px solid transparent;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
}
a:hover.up-arrow:after {
	border-bottom-color: brown;
}

Up CSS Arrows using Link Tag

Right CSS Arrows

The technique is the same. You just need to add color to left border and transparent to others. You can also vertical align css arrows in the middle by giving 50% top position and negative number to margin-top with the same amount of pixels as border width.

The HTML

<div class="right-arrow">Div with Right Arrow</div>

The CSS

.right-arrow {
	display: inline-block;
	position: relative;
	background: orange;
	padding: 15px;
}
.right-arrow:after {
	content: '';
	display: block;  
	position: absolute;
	left: 100%;
	top: 50%;
	margin-top: -10px;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 10px solid orange;
}

Div with right arrow using CSS

Left CSS Arrows

Same thing as above, right border should have now color. Usually you must set the color for the mirrored border of the one you want to create.

For example, for top arrow you should add color to bottom border, as simple as that.

The HTML

<div class="left-arrow">Div with Left Arrow</div>

The CSS

.left-arrow {
	display: inline-block;
	position: relative;
	background: grey;
	padding: 15px;
}
.left-arrow:after {
	content: '';
	display: block;  
	position: absolute;
	right: 100%;
	top: 50%;
	margin-top: -10px;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-right: 10px solid grey;
	border-bottom: 10px solid transparent;
	border-left: 10px solid transparent;
}

Div With Left Arrow Using Css

Bottom / Down CSS Arrows

You can also create full css arrows as big as container. There are some conditions, that you must have fixed width. For example if your div has 200 pixels, left and right borders should be 100 pixels each, and the top border should be the height of the css arrow. Here is an example:

<div class="down-arrow">Div with Bottom Arrow</div>

The CSS

.down-arrow {
	display: inline-block;
	position: relative;
	background: darkcyan;
	padding: 15px 0;
	width: 200px;
	text-align: center;
}
.down-arrow:after {
	content: '';
	display: block;  
	position: absolute;
	left: 0;
	top: 100%;
	width: 0;
	height: 0;
	border-top: 20px solid darkcyan;
	border-right: 100px solid transparent;
	border-bottom: 0 solid transparent;
	border-left: 100px solid transparent;
}

Div with Bottom/Down Arrow CSS

Creating Triangle CSS Arrows with Right Angle

If you want to create triangle css arrows with right angles you must add color to a single border, and border width for the one with color and another one with transparent color, like in example below.

<div class="right-angle-arrow"></div>
<div class="right-angle-arrow red"></div>
<div class="right-angle-arrow orange"></div>
<div class="right-angle-arrow magenta"></div>

The CSS

.right-angle-arrow {
	display: inline-block;
	position: relative;
}
.right-angle-arrow:after {
	content: '';
	display: block;  
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	border-top: 50px solid darkcyan;
	border-right: 50px solid transparent;
	border-bottom: 0 solid transparent;
	border-left: 0 solid transparent;
}
.red:after {
	border-top: 50px solid red;
	border-right: 0 solid transparent;
	border-bottom: 0 solid transparent;
	border-left: 50px solid transparent;
}
.orange:after {
	border-top: 0 solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 50px solid orange;
	border-left: 0 solid transparent;
}
.magenta:after {
	border-top: 0 solid transparent;
	border-right: 0 solid transparent;
	border-bottom: 50px solid magenta;
	border-left: 50px solid transparent;
}

Triangle CSS Arrows With Right Angle

Conclusion

CSS arrows are a great alternative for images. No extra server requests, no bandwidth consumer and is easy to do. This works in Internet Explorer 8 too, but you must declare a DOCTYPE in your html document. If you have any improvements share them with others in the comments section.

Download CSS

Rate & Share
1 Star2 Stars3 Stars4 Stars5 Stars (12 votes, average: 4.33 out of 5)
Related Articles
Comments
Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.


2 + 3 =

Search
Subscribe by E-mail

HTML-TUTS is created and maintained by Dan Doicaru.
This website is a rebrand to Extreme Design Studio (extremestudio.ro), built under WordPress platform.