En este ejemplo vemos como crear la forma de un triángulo con CSS puro aplicado a una etiqueta <div>
HTML
1 | <div class="triangulo"></div> |
CSS
1 2 3 4 5 6 7 | .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