Crear un Triángulo a partir de un DIV

CSS 12 febrero, 2019

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

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

.triangulo {

width: 0;

height: 0;

border-bottom: 20px solid black;

border-left: 20px solid transparent;

border-right: 20px solid transparent;

}

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