1. ¿Qué es clip-path?

La propiedad clip-path permite definir una región visible de un elemento, ocultando el resto. Esta región se describe mediante una forma geométrica (círculo, elipse, polígono, etc.) o mediante una ruta SVG.

Al recortar un elemento, el navegador sigue renderizando su contenido, pero sólo la porción dentro del “clip” es visible al usuario, lo que abre posibilidades para:

• Diseños creativos sin imágenes externas.
• Animaciones de forma dinámica.
• Optimización de carga al evitar assets extra.

2. Sintaxis básica

La sintaxis sigue la forma clip-path: función(valores);. Las funciones más comunes son:

• circle()
• ellipse()
• inset()
• polygon()
• path() (ruta SVG)

Ejemplo mínimo:

img {
  clip-path: circle(50% at 50% 50%);
}

3. Tipos de formas y sus parámetros

.c1 { clip-path: circle(40px); }
.c2 { clip-path: circle(30% at 20% 80%); }

.e1 { clip-path: ellipse(60% 30% at 50% 50%); }

.i1 { clip-path: inset(10% 5% 15% 20% round 10px); }

.p1 { clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%); }

.svg-path { clip-path: path('M10 10 H 90 V 90 H 10 Z'); }

4. Ejemplos reales

4.1 Imagen con forma de hexágono

img {
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

4.2 Texto recortado con circle() animado

Animación con clip‑path

@keyframes pulse {
  0%   { clip-path: circle(30% at 50% 50%); }
  50%  { clip-path: circle(45% at 50% 50%); }
  100% { clip-path: circle(30% at 50% 50%); }
}
.pulse-text { animation: pulse 3s infinite; }

5. Comparativa: clip-path vs mask-image vs SVG

6. Compatibilidad y fallback

Para navegadores que no soportan clip-path, se recomienda:

• Utilizar svg como fallback mediante <svg> inline.
• Aplicar la propiedad con prefijo -webkit- para Safari.
• Definir una versión sin recorte para garantizar la usabilidad.

.fallback {
  /* Safari < 9 */
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  /* Chrome/Edge/Firefox */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

7. Buenas prácticas de rendimiento

1. Usar unidades porcentuales siempre que sea posible para que el recorte se recompute solo al redimensionar.
2. Limitar la complejidad de polygon(): más de 12 vértices puede afectar la GPU.
3. Prefijado con will-change: clip-path cuando la forma cambie con animaciones.
4. Evitar recortes en elementos con filter o transform simultáneos, pues pueden forzar re‑pintado.
5. Combinar con object-fit para imágenes responsivas y evitar distorsión.

.animado {
  will-change: clip-path;
  animation: rotate 4s linear infinite;
}
@keyframes rotate {
  from { clip-path: inset(0% round 0); }
  to   { clip-path: inset(0% round 50%); }
}

8. Accesibilidad y SEO

El recorte visual no afecta la indexación del contenido, pero hay que:

• Proveer alt descriptivo en imágenes recortadas.
• Evitar recortar texto esencial; el lector de pantalla sigue leyendo todo el contenido.
• Usar contrastes adecuados en áreas recortadas para cumplir WCAG 2.1 AA.

9. Solución de problemas frecuente

10. Casos de uso avanzados

• Galerías tipo "masonry" con recortes dinámicos: combinar grid y clip-path para piezas de distinto tamaño.
• Hover reveal: al pasar el ratón, cambiar la forma del recorte para revelar más información.
• Animaciones de carga (skeleton loaders) usando polygon() que simulan contornos de texto.
• Componentes de UI con bordes irregulares (botones con forma de estrella, tarjetas con esquina recortada).
• Integración con frameworks: en React o Vue usar style={{ clipPath: 'polygon(...)' }} y combinar con styled‑components para temas dinámicos.