Create CSS arrows

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>

Easy no?