En este artículo, te explicaré cómo creé una figura abstracta con forma de diamante utilizando únicamente HTML y CSS, inspirada en un reto propuesto en la plataforma CSS Battle. Analizaremos paso a paso el código utilizado y los conceptos clave involucrados en este desafío.

🚀 Resultado Final

Al final del artículo, lograrás esta figura utilizando solo CSS puro, sin imágenes ni SVGs:

📌 Código HTML y CSS completo

Primero, aquí tienes el código completo que usé para este desafío:

htmlCopiarEditar<div></div>

<style>
  *{
    background-color: #f3ead2;
  }
  div{
    width: 0px;
    height: 0px;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
    border-top: 70px solid #c0d6e7;
    border-bottom: 70px solid transparent;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  div::before{
    content:"";
    display: block;
    background-color: #4c455b;
    width: 50px;
    height:149px;
    position: absolute;
    top: -70px;
    left: -120px;
    transform-origin: top right;
    transform: rotate(-45deg);
  }
  div::after{
    content:"";
    display: block;
    background-color: #d96c7b;
    width: 50px;
    height:99px;
    position: absolute;
    top: -70px;
    right: -120px;
    transform-origin: top left;
    transform: rotate(45deg);
  }
</style>

---

🔎 Explicación detallada del código

Veamos línea por línea qué hace cada parte del código.

🌟 Fondo General

cssCopiarEditar* {
  background-color: #f3ead2;
}

Este selector universal (*) establece un color beige claro (#f3ead2) como fondo general para todos los elementos en la página.

---

🔹 El elemento principal (div)

cssCopiarEditardiv {
  width: 0px;
  height: 0px;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-top: 70px solid #c0d6e7;
  border-bottom: 70px solid transparent;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Aquí, el div principal tiene:

• width y height en 0px:
  El elemento no tiene tamaño propio. Esto se hace para que sean visibles únicamente sus bordes.
• Uso de bordes para crear un triángulo:
  Cuando establecemos bordes con colores transparentes excepto uno (border-top en este caso), obtenemos un triángulo. Este truco es muy usado en CSS para crear figuras geométricas.
• Posicionamiento absoluto centrado (fixed)
  El elemento está centrado en la pantalla usando una combinación de position: fixed y las propiedades top: 50% y left: 50%, junto con la transformación transform: translate(-50%, -50%).

---

🔸 Pseudo-elemento ::before

cssCopiarEditardiv::before {
  content:"";
  display: block;
  background-color: #4c455b;
  width: 50px;
  height:149px;
  position: absolute;
  top: -70px;
  left: -120px;
  transform-origin: top right;
  transform: rotate(-45deg);
}

Este pseudo-elemento (::before) añade un rectángulo inclinado que forma una de las “alas” del diamante:

• content: "": Necesario para mostrar el pseudo-elemento.
• background-color: Un azul oscuro (#4c455b).
• Posición absoluta: Posiciona precisamente este rectángulo relativo al div.
• transform-origin: top right: Indica que la rotación ocurrirá en la esquina superior derecha del rectángulo.
• transform: rotate(-45deg): Gira el rectángulo para crear una inclinación diagonal hacia la izquierda.

---

🔸 Pseudo-elemento ::after

cssCopiarEditardiv::after {
  content:"";
  display: block;
  background-color: #d96c7b;
  width: 50px;
  height:99px;
  position: absolute;
  top: -70px;
  right: -120px;
  transform-origin: top left;
  transform: rotate(45deg);
}

Este segundo pseudo-elemento (::after) completa la figura, formando la otra “ala”:

• background-color: Un tono rosado (#d96c7b).
• Posicionamiento absoluto simétrico: Posicionado en el lado opuesto al primer pseudo-elemento.
• transform-origin: top left: Ahora la rotación ocurre desde la esquina superior izquierda.
• transform: rotate(45deg): Inclina el rectángulo hacia la derecha, completando el efecto visual simétrico.

---

🖌️ Resumen de conceptos clave utilizados

En este ejercicio repasamos conceptos clave como:

• Uso de bordes para crear formas geométricas (triángulos).
• Posicionamiento preciso con position: fixed y position: absolute.
• Transformaciones avanzadas con transform: translate() y transform: rotate().
• Uso de pseudo-elementos ::before y ::after para añadir elementos adicionales sin HTML extra.

---

🏆 Conclusión

Este desafío de CSS demuestra claramente cómo podemos utilizar técnicas sencillas para lograr resultados visuales muy interesantes. CSS es mucho más que simples estilos: es una herramienta poderosa para crear arte y efectos visuales complejos.

👉 Ver la solución en CodePen
👉 Ver video explicativo en YouTube

¿Listo para intentarlo tú mismo? ¡Comparte tus resultados y sigamos aprendiendo juntos!