Triángulos En CSS

<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>
.arrow-up {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;	
    border-bottom: 5px solid black;
}

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #f00;
}

.arrow-right {
    width: 0; 
    height: 0; 
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;	
    border-left: 60px solid green;
}

.arrow-left {
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent; 
    border-right:10px solid blue; 
}

Para usarlo como parte de otros elementos, lo puedes hacer usando Pseudo Elementos :before y :after. Como se muestra en el siguiente ejemplo:

<div class="wrap">
    <ul class="menu group">
      <li class="active">Menu 1</li>
      <li class="active">Menu 2</li>
      <li class="active">Menu 3</li>
      <li class="active">Menu 4</li>
    </ul>
</div>
body {
  background: #333;
}
*, *:after, *:before {
  box-sizing: border-box;
}
.wrap {
  margin: 80px auto;
  text-align: center;
}
.menu {
  background: #222;
  padding: 10px;
  width: 300px;
  color: white;
  position: relative;
  margin: 0 auto;
  list-style: none;
  border-bottom: 1px solid #444;
}
.menu li {
  width: 25%;
  float: left;
}
.active {
  position: relative;
}
.active:after {
  content: "";
  width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #222;
  position: absolute;
  top: -20px;
  left: 0;
}
.group:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

Ver Demo