Crear un Triángulo a partir de un DIV

CSS febrero 12, 2019

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



Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

La Coruña, España Correo