rss feed Twitter Page Facebook Page Github Page Stack Over Flow Page

Create CSS arrows

Posted on Tuesday February 07, 2012 by Eric Potvin

Remember back in the days when we had to create little images (in this case arrows) for our menu? Well these days are over!

By using a simple technique and by settings some borders we can create arrows just using CSS.

Simple Arrow

.arrowUp {
  border-top: 12px solid #ddd;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  font-size: 0;
  line-height: 0;
  width: 0;
}
.arrowDown {
  border-bottom: 12px solid #ddd;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  font-size: 0;
  line-height: 0;
  width: 0;
}
.arrowRight {
  border-left: 12px solid #ddd;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 12px solid transparent;
  font-size: 0;
  line-height: 0;
  width: 0;
}
.arrowLeft {
  border-left: 12px solid transparent;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 12px solid #ddd;
  font-size: 0;
  line-height: 0;
  width: 0;
}

HTML code:

<div class="arrowUp"></div>
<div class="arrowRight"></div>
<div class="arrowDown"></div>
<div class="arrowLeft"></div>
Demo:

Way easier than images right?

Arrows for menus

Now let's see how can we add the "down arrow" to a menu. We need to add an arrow to the selected "menu 3".

ul
{
  list-style-type: none;
  position: relative;
}
li {
  list-style-type: none;
  background-color: #ddd;
  border-right: solid 1px #aaa;
  height: 26px;
  position: relative;
  width: 100px;
  float:left;
  text-align:center;
}
li:last-child {
  border-right: none;
}
li.selected:after {
  content: ' ';
  height: 0;
  position: absolute;
  width: 0;
  border: 10px solid transparent;
  border-top-color: #ddd;
  top: 100%;
  left: 50%;
  margin-left: -10px;
}
li a {
  display: inline-block;
  color:#444;
  text-decoration: none;
  font: normal 12px verdana;
  line-height: 19px;
  padding: 4px;
}

This will show the arrow on the menu 3 using the following code:

<ul>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li class="selected"><a href="#">Menu 3</a></li>
  <li><a href="#">Menu 4</a></li>
  <li><a href="#">Menu 5</a></li>
</ul>

  1. Menu 1
  2. Menu 2
  3. Menu 3
  4. Menu 4
  5. Menu 5

Easy no?