CSS Triangles

css-triangles

.triangle-up {
  border-bottom: 10px solid red;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
	
  height: 0;
  width: 0;
}

.triangle-down {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid green;
	
  height: 0;
  width: 0; 
}

.triangle-right {
  border-bottom: 10px solid transparent;
  border-left: 10px solid blue;
  border-top: 10px solid transparent;

  height: 0;
  width: 0; 
}

.triangle-left {
  border-bottom: 10px solid transparent;
  border-right: 10px solid yellow;
  border-top: 10px solid transparent;

  height: 0;
  width: 0; 
}