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.


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