Crear formas geométricas con puro CSS y 1 elemento HTML ha sido una tarea creada hace años ya y que tiene recopilaciones varias de métodos y usos. Personalmente para crear triángulos con CSS uso un generador genial que espero nunca lo bajen: CSS triangle generator.

A raíz de su constante uso, creé un mixin para LESS que me permite crear triángulos equilátero, isósceles y escaleno con sólo variar los valores de ancho/alto y dirección:

Uso⌗

Llama el mixin en tu sentencia CSS y entrégale los valores que necesitas:

.triangle(direccion,ancho,alto,color);

Dirección: valores⌗

  • top
  • bottom
  • left
  • right
  • topright
  • topleft
  • bottomright
  • bottomleft

Ejemplo: básico⌗ 

@tamano: 50px;
@color: red;
.basico {
  .triangle(bottomright,@tamano,@tamano,@color);
}

Ejemplo: avanzado⌗ 

@tamano: 50px;
@color: red;
.avanzado {
  width: @tamano*2;
  height: @tamano;
  line-height: @tamano;
  background-color: @color;
  position: relative;
  &:after {
    position: absolute;
    left: 0;
    top: -@tamano;
    .triangle(top,@tamano,@tamano,@color);
  }
  &:before {
    position: absolute;
    left: 0;
    top: @tamano;
    .triangle(topleft,@tamano*2,@tamano*2,@color);
  }
}

Ver en GitHub

*actualización: Gracias a Félix Ortega por traducir el mixin a SASS: