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

guest
0 Comentarios
Inline Feedbacks
Ver todos los comentarios
La Coruña, España Correo mail