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
Login
0 Comentarios
Reviews
Biblioteca
Gameplays
Recursos Gratuitos
Wordpress
Twitter
Facebook
Instagram
YouTube
Telegram
Discord
