bootstrap css arrow class

.arrow {
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: top;
    content: "";
    opacity: 0.3;
    filter: alpha(opacity=30);
}

.btn .arrow {
    margin-left: 0;
}
.btn .arrow.arrow-up {
    margin-top: 6px;
}
.btn .arrow.arrow-down {
    margin-top: 7px;
}
.btn .arrow.arrow-left {
    margin-top: 5px;
}
.btn .arrow.arrow-right {
    margin-top: 6px;
}

.btn:hover .arrow {
  opacity: 1;
  filter: alpha(opacity=100);
}

.arrow.arrow-up {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid #000000;
}

.arrow.arrow-down {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #000000;
}

.arrow.arrow-right {
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid #000000;
}

.arrow.arrow-left {
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid #000000;
}

reference : http://css-tricks.com/snippets/css/css-triangle/