Generador CSS de esquinas invertidas (Corner Inverter)

¿Quieres crear esquinas «invertidas» y formas con border-radius no convencionales sin perder horas en cálculos? He encontrado una herramienta gratuita e interactiva que genera SVGs, clip-path y máscaras listas para usar: Corner Inverter. Ideal para decorar secciones, botones o máscaras en tus layouts y mantener control total del aspecto responsivo.

Qué hace

• Diseña visualmente esquinas invertidas y exporta la forma en SVG.
• Ofrece varias opciones de exportación: SVG plano, clip-path (path), mask con data-URI y <clipPath> responsive.
• Recomendada para elementos decorativos, botones y máscaras responsivas (usa aspect-ratio para mantener proporciones). corner-inverter.douiri.org

Por qué te puede interesar

• Ahorra tiempo frente a implementaciones manuales complejas.
• Genera assets que funcionan bien con mask o <clipPath> (más responsivos que clip-path: path() puro).
• Open source y gratuita — perfecta para experimentar en proyectos Flowtitude.

Cómo usarla (resumen rápido)

1. Entra en la herramienta y ajusta dimensiones y parámetros hasta lograr la forma deseada.
2. Exporta como SVG o copia la opción mask/clipPath que prefieras.
3. Si usas mask, define aspect-ratio en el elemento para asegurar un escalado correcto.

Ejemplo mínimo (usar máscara SVG con aspect-ratio)

.mi-tarjeta {
  aspect-ratio: 16 / 9;
  mask: url('data:image/svg+xml;utf8,<svg...>') no-repeat center / contain;
}

(Sustituye data:image... por el SVG data-URI exportado por la herramienta.) corner-inverter.douiri.org

Casos de uso sugeridos

• Héroes/headers con formas atrevidas.
• Tarjetas de producto con bordes “recortados”.
• Botones o badges con efecto visual distintivo.
• Elementos decorativos en landings y mockups.

Idea clave 📖
Si vais a usar las formas como máscara responsive, siempre combinar mask o <clipPath> con aspect-ratio para evitar recortes inesperados en pantallas con distinta proporción.

Enlace / recurso
Probad la herramienta aquí: https://corner-inverter.douiri.org/ corner-inverter.douiri.org