Generador de Triángulos CSS

Dos técnicas dominan la creación de triángulos en CSS, y cada una resuelve un problema distinto. El truco del borde pone el ancho y el alto de un elemento en cero y usa bordes gruesos y desiguales que se encuentran en ángulos agudos para simular un triángulo. Funciona desde Internet Explorer 6 y no necesita soporte especial del navegador, pero solo produce una forma de un único color plano. Clip-path hace lo contrario: recorta una ventana triangular de una caja normal, así que la forma puede llevar un degradado, una imagen de fondo o animarse suavemente hacia otro polígono. Este generador construye ambas versiones con los mismos controles, para que puedas compararlas lado a lado.

Elige una de ocho direcciones: los cuatro puntos cardinales para triángulos simétricos, o las cuatro esquinas para formas con ángulo recto, útiles en esquinas de cinta y efectos de borde doblado. Mueve los controles de ancho y alto para cambiar la forma del triángulo y elige un color con el selector o escribiendo un valor hexadecimal. La vista previa se actualiza con cada cambio, renderizada con el CSS exacto que la herramienta te entregará, no una aproximación.

Cambia el fondo detrás de la vista previa para comprobar cómo se ve la forma sobre superficies claras, grises u oscuras antes de decidir un color. Cuando se vea bien, copia el bloque de CSS debajo de la vista previa: una regla de truco de borde si elegiste ese método, o una declaración de ancho, alto, color de fondo y clip-path si elegiste el otro. Nada de lo que construyas aquí se sube ni se guarda; el código permanece en tu navegador hasta que lo copies.