Generador de triángulos y flechas CSS

Generador de triángulos y flechas CSS

Elige una dirección, ancho, altura y color, y esta herramienta escribe la regla CSS que dibuja la forma — un triángulo apuntando arriba, abajo, izquierda o derecha, o un triángulo de esquina para un distintivo estilo cinta. No hay archivo de imagen para exportar ni marcado adicional que agregar: la forma es CSS puro, por lo que se escala limpiamente a cualquier tamaño y se mantiene nítido en pantallas de alta densidad. Es el bloque de construcción detrás de iconos desplegables, indicadores de acordeón, distintivos de cinta y el pequeño puntero en un tooltip o una burbuja de chat.

Se soportan dos técnicas. El truco de borde establece los bordes opuestos de una caja de tamaño cero como transparentes y colorea el resto — la receta clásica, con la compatibilidad de navegador más amplia. clip-path en cambio dibuja la forma en una caja dimensionada usando un polígono, que es más fácil de leer en herramientas de desarrollo y de animar. Cambia entre ellas con la opción de técnica.

Activa "Usar como pseudo-elemento ::after" para una regla limitada a ::after, posicionada absolutamente contra el lado o esquina que elegiste, lista para aplicar a un elemento que ya tiene posicionamiento relativo — exactamente lo que necesita un icono desplegable o el puntero de un tooltip, sin HTML adicional. Activa "Burbuja de diálogo con flecha allegada" en su lugar y la herramienta genera dos reglas juntas: una caja de llamada bordeada y redondeada y una cola de flecha attached a su borde, apuntando en la dirección que elegiste — la forma detrás de una burbuja de chat o un popover de texto de ayuda.

Todo se ejecuta en tu navegador: nada de lo que configures se envía a ningún lado. Copia el CSS generado, descárgalo como archivo .txt o envíalo a la entrada de otra herramienta — los generadores de border-radius o clip-path, por ejemplo — para seguir refinando la forma.

Preguntas frecuentes