¿Sabías que se puede crear un triángulo usando solo CSS? No es necesario cargar imágenes, lo que nos permite ahorrar ancho de banda y mejorar el rendimiento al evitar que el usuario tenga que descargar más bytes de los necesarios.

Este truco, aunque no es nuevo, es muy útil. Se utiliza con frecuencia para indicar la dirección de algún elemento, ya que el triángulo puede apuntar en cualquier dirección simplemente ajustando las propiedades de estilo.

A continuación, te mostramos un ejemplo práctico de cómo crear un triángulo con CSS que apunte hacia arriba.

Código HTML:

<div class="triangulo"></div>

Estilos css:

.triangulo {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #3498db;
  margin: 50px auto;
}

¿Cómo funciona?

La clave para crear el triángulo está en los siguientes puntos:

• width: 0; y height: 0;: Estas propiedades eliminan el ancho y alto del elemento.
• border-left y border-right: Se utilizan para crear los lados transparentes del triángulo. El valor define el ancho de la base del triángulo.
• border-bottom: Es el borde que le da color y forma al triángulo. El valor establece la altura del triángulo.
• Colores y dimensiones: Puedes ajustar los valores de los bordes para cambiar el tamaño, color y dirección del triángulo.

Por ejemplo, si quisieras un triángulo apuntando hacia abajo, podrías usar border-top en lugar de border-bottom. Hacia la izquierda sólo se aplica el color en border-right y sin margin y hacia la derecha igual pero definiendo sólo border-left.

.triangulo-abajo {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid #3498db;
  margin: 50px auto;
}

.triangulo-izquierda {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-right: 100px solid #3498db;
}

.triangulo-derecha {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 100px solid #3498db;
}

Demo

Aquí puedes ver un ejemplo de como quedaría el triángulo.