clip-path en CSS: formas personalizadas y responsive sin imágenes

La propiedad clip-path recorta un elemento como si lo pasaras por una tijera: todo lo que queda fuera de la forma definida se vuelve invisible. A diferencia de una imagen PNG con transparencia, la forma vive en CSS, pesa cero bytes adicionales y puede cambiar de tamaño con el elemento. Es la herramienta correcta para héroes diagonales, avatares poligonales, tarjetas hexagonales y decenas de composiciones que antes exigían SVG o imágenes recortadas.

Las tres funciones básicas

clip-path acepta varias funciones de forma; estas tres cubren el 95% de los casos:

.poligono {
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
.circulo {
  clip-path: circle(40% at 50% 50%);
}
.elipse {
  clip-path: ellipse(60% 40% at 50% 50%);
}

• polygon() recibe una lista de vértices X% Y%. El navegador los conecta en orden y cierra la figura automáticamente entre el último y el primero.
• circle() define radio y centro. El radio también acepta unidades fijas (px) o closest-side / farthest-side.
• ellipse() igual pero con dos radios independientes para el eje horizontal y vertical.

Por qué usar porcentajes (y no píxeles)

Este detalle convierte una curiosidad en una decisión de arquitectura: si defines los vértices en porcentaje, la forma se adapta al tamaño del elemento en cada momento. Un polygon(0% 0%, 100% 0%, 100% 85%, 0% 100%) produce un corte diagonal en una tarjeta de 300px, en un banner de 1400px y en cualquier punto intermedio.

Con píxeles obtienes exactamente lo contrario: la forma queda congelada y se rompe cuando el elemento cambia de tamaño. Para diseños responsive, porcentajes siempre.

Cómo se construye un polígono a mano

El flujo mental para diseñar una forma es pensar en coordenadas sobre un lienzo donde (0%, 0%) es la esquina superior izquierda y (100%, 100%) la inferior derecha. Una estrella de cinco puntas, por ejemplo:

.estrella {
  clip-path: polygon(
    50% 0%, 63% 36%, 98% 36%, 71% 57%,
    81% 94%, 50% 74%, 19% 94%,
    29% 57%, 2% 36%, 37% 36%
  );
}

Diez vértices porque una estrella de cinco puntas alterna exterior e interior: punta, valle, punta, valle... Hacer esto a mano requiere calcular senos y cosenos o dibujar sobre papel cuadriculado. Es precisamente el trabajo que automatiza un editor visual: arrastras los puntos y copias el resultado.

Animar entre formas

Una capacidad poco conocida: si dos polígonos tienen el mismo número de vértices, puedes interpolarlos con transition:

.forma {
  clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%);
  transition: clip-path 0.4s ease;
}
.forma:hover {
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%);
}

Ambos tienen cuatro vértices, así que el navegador anima suavemente de rectángulo a diamante. Si el número de puntos difiere, el cambio es instantáneo y brusco. Truco habitual: añadir vértices duplicados o casi coincidentes a la forma más simple hasta igualar el conteo.

Los casos de uso que sí aportan

Secciones con corte diagonal: el clásico hero cuya parte inferior no es horizontal sino inclinada. Dos vértices desplazados bastan.

Avatares y badges geométricos: hexágonos u octógonos para diferenciarte del avatar circular de siempre, sin generar ni una imagen.

Tarjetas con muesca: combinar un polygon con vértices interiores crea recortes tipo "ticket" o "etiqueta".

Reveal on scroll: animar clip-path: inset() para descubrir una imagen progresivamente al hacer scroll (aquí inset() sí es útil porque sus valores son distancias).

Compatibilidad y detalles finos

clip-path con sintaxis de formas básicas funciona en todos los navegadores modernos desde hace años (Safari necesitó prefijo -webkit- hasta la versión 9.1). Tres advertencias prácticas:

1. El contenido fuera del recorte deja de ser interactivo. Si recortas un botón, la zona invisible ya no captura clics — normalmente es lo deseado, pero tenlo presente con formas cóncavas.
2. El box-shadow se recorta junto con el elemento. La sombra vive "fuera" del borde, así que un elemento con clip-path pierde su sombra salvo que la apliques a un contenedor padre.
3. No confundas con mask. clip-path corta con una forma sólida; mask permite máscaras con gradiente o imagen (transiciones suaves de opacidad dentro del recorte).

Diseña tus formas arrastrando puntos

Escribir polígonos a mano es arqueología de coordenadas. Nuestro Clip Path Maker te da un lienzo con puntos arrastrables, diez presets (triángulo, hexágono, estrella, flecha, bocadillo...), modos circle y ellipse, y botones para añadir o eliminar vértices. Copias el clip-path final en porcentajes y funciona en cualquier tamaño.

Preguntas frecuentes

¿clip-path sustituye a las imágenes recortadas? En rendimiento y flexibilidad, sí: cero peticiones de red, escalado perfecto y editable desde DevTools. Solo necesitas imagen recortada real cuando la forma tiene bordes suaves o antialiasing complejo.

¿Puedo combinar varias formas? No directamente en una declaración, pero puedes anidar elementos con distintos clip-path o usar polygon con subpaths complejos (polígonos auto-intersectados producen zonas recortadas según la regla evenodd).

¿Funciona con video o iframe? Sí, clip-path aplica a cualquier elemento renderizado, incluyendo <video> e iframes embebidos.

Diseña tu forma visualmente con el Clip Path Maker, arrastra los puntos y copia el CSS resultante.