Cómo hacer un triángulo con HTML y CSS

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.

Tutorial: Cómo hacer un triángulo con HTML y CSS

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.

Si te sirvió, ¡compártelo!

También te interesaría...

Suscríbete a nuestra lista de correo

Agregue un comentario

Su dirección de correo no se hará público. Los campos requeridos están marcados *


Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.