Crear un Triángulo a partir de un DIV

En este ejemplo vemos como crear la forma de un triángulo con CSS puro aplicado a una etiqueta <div>

HTML

<div class="triangulo"></div>

CSS

.triangulo {
  width: 0;
  height: 0;
  border-bottom: 20px solid black;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

Resultado

Explicación

Como vemos en el código CSS, añadimos bordes al <div>.

El color del borde es el color del triángulo y los lados correspondientes al de la punta del triángulo corresponde al border-*opuesto . 

Por ejemplo, un color en border-top significaría que el triángulo apuntaría hacia abajo.

Podemos experimentar con los valores de los px para cambiar la proporción del triángulo.

Pruébalo en nuestro Editor Online

Relacionados