En este tutorial básico vamos a aprender cómo hacer un triángulo con HTML y CSS. Anteriormente hemos creado un círculo usando HTML y CSS, así que esto será un siguiente paso. El triángulo lo vamos a crear usando bordes, así que sigue leyendo para aprender paso a paso.
1. Definir un elemento en HTML
Para crear un triángulo con CSS, primero debemos crear un elemento en HTML. En este ejemplo, usaremos un <div>.
<div class="triangulo></div>
Como puedes ver, hemos creado un elemento con la clase triángulo. Esto nos permitirá usar CSS para personalizar este elemento.
2. Definir ancho y altura 0px con CSS
Ahora con CSS, vamos a definir el tamaño de nuestro elemento. Aquí vamos a hacer algo inusual, y eso es hacer que nuestro elemento tenga ancho y altura como 0px. Usamos las propieades width y height para esto.
.triangulo{
width: 0px;
height: 0px;
}
¿Por qué hacemos que nuestro elemento tenga ancho y altura 0px para hacer un triángulo?
Para hacer un triángulo con HTML y CSS necesitamos que el elemento tenga 0px de altura y ancho. Esto es porque vamos a crear el triángulo a base de bordes y el ancho de cada borde. En el siguiente paso vamos a explicar en mayor detalle cómo funciona.
3. Agregar bordes con CSS
Siguiendo con CSS, vamos a ir agregando los bordes necesarios para crear la forma de triángulo. Para hacer la mayoría de triángulos, solo vamos a necesitar bordes en 3 lados. Además, un borde será de color sólido, y los otros dos serán transparentes.
A continuación, explicaremos cómo crear triángulos en distintas orientaciones:
a) Triángulo hacia arriba
Para hacer un triángulo hacia arriba, usaremos el siguiente CSS:
.triangulo{
width: 0;
height: 0;
border-right: 50px solid transparent;
border-bottom: 100px solid blue;
border-left: 50px solid transparent;
}
Usamos el borde inferior de un color sólido de 100px, mientras que los bordes izquierdo y derecho transparentes de 50px. Este es el resultado:
b) Triángulo hacia la derecha
Para hacer un triángulo a la derecha, usaremos el siguiente CSS:
.triangulo{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 100px solid blue;
}
Usamos el borde izquierdo de un color sólido de 100px, mientras que los bordes superior e inferior transparentes de 50px. Este es el resultado:
c) Triángulo hacia abajo
Para hacer un triángulo hacia abajo, usaremos el siguiente CSS:
.triangulo{
width: 0;
height: 0;
border-top: 100px solid blue;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
}
Usamos el borde superior de un color sólido de 100px, mientras que los bordes derecho e izquierdo transparentes de 50px. Este es el resultado:
d) Triángulo hacia la izquierda
Para hacer un triángulo a la izquierda, usaremos el siguiente CSS:
.triangulo{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid blue;
border-bottom: 50px solid transparent;
}
Usamos el borde derecho de un color sólido de 100px, mientras que los bordes superior e inferior transparentes de 50px. Este es el resultado:
e) Triángulo rectángulo
Para hacer un triángulo rectángulo, usaremos el siguiente CSS:
.triangulo{
width: 0;
height: 0;
border-top: 100px solid transparent;
border-left: 100px solid blue;
}
Usamos el borde izquierdo de un color sólido de 100px, mientras que el bordes superior transparente de 100px. Este es el resultado:
También es posible crear triángulos rectángulos en distintas orientaciones, pero eso te lo dejo de tarea 😉
Recomendaciones finales
Si te pones a analizar cada triángulo, te darás cuenta que hay un patrón. Como puedes ver no es muy dificil, pero te recomiendo que abras un editor de HTML y CSS online y comiences a jugar un poco con el CSS.
