¿CSS clip-path afecta a las áreas de clic y hover?

Sí. El área recortada se elimina completamente de la región interactiva del elemento, por lo que los clics y eventos de hover solo se registran dentro de la forma visible. Si necesitas efectos de hover en el bounding box completo pero solo recorte visual, es posible que necesites soluciones JavaScript o ajustes de pointer-events.

¿Cómo animo una forma CSS clip-path?

Puedes hacer transición entre dos valores clip-path usando transiciones o animaciones CSS, siempre que ambos usen la misma función de forma y el mismo número de puntos. Por ejemplo, la transición entre dos definiciones polygon() con conteos de puntos idénticos funciona sin problemas. La transición entre circle() y polygon() no funciona — el navegador no tiene forma de interpolarlos.

¿Por qué desaparece mi box-shadow con clip-path?

Porque clip-path recorta todo fuera del límite de la forma, incluyendo box-shadow que se renderiza fuera de los límites del elemento. La solución es usar filter: drop-shadow() — aplica la sombra después del compositing, siguiendo la forma visible real en lugar del bounding box.

¿Puedo usar clip-path para diseños responsive?

Sí, si usas valores basados en porcentajes en polygon() u otras funciones. Los valores de porcentaje son relativos a las dimensiones propias del elemento, por lo que la forma se escala proporcionalmente a medida que el elemento cambia de tamaño. Los valores de píxeles fijos en clip-path no escalan.

¿clip-path está soportado en navegadores móviles?

Los navegadores móviles modernos (iOS Safari 13.4+, Chrome para Android) soportan las funciones de forma clip-path básicas sin prefijos. El clip-path basado en SVG tiene una cobertura ligeramente más amplia para dispositivos más antiguos. La brecha principal son las versiones antiguas de iOS Safari que necesitaban el prefijo -webkit- para algunas sintaxis.

CSS clip-path: Crear formas personalizadas sin la complejidad de SVG

La primera vez que noté un avatar hexagonal

La primera vez que realmente me detuve a observar un sitio web preguntándome cómo fue cuando vi avatares de usuario hexagonales en una tabla de clasificación de juegos. No circulares — hexagonales. Seis lados. Mi pensamiento inmediato fue que debían haber usado una máscara PNG personalizada o algún truco de canvas. Resultó ser seis líneas de CSS.

Esa fue mi introducción a clip-path, y genuinamente cambió cómo pienso sobre las formas en el diseño web. Antes, "forma" significaba border-radius, SVG o imágenes. Ahora el propio navegador es tu herramienta de corte.

Una breve historia: cómo llegamos aquí

Antes de que clip-path fuera una propiedad CSS, crear formas no rectangulares significaba sortear algunos obstáculos dolorosos. Podías usar elementos SVG clipPath y referenciarlos desde tu CSS, lo cual funcionaba pero requería definir formas en una sintaxis completamente diferente en una parte diferente de tu markup. Alternativamente, usabas overflow: hidden con posicionamiento ingenioso y hacks de border-radius — lo que te daba formas redondeadas pero nada verdaderamente angular o arbitrario.

La propiedad CSS clip-path estandarizó esto. En lugar de lidiar con SVG, escribes tu definición de forma directamente en CSS. El navegador se encarga del masking. Es una de esas características que te hace retroactivamente irritado por cuánto tiempo perdiste con los enfoques más antiguos.

Las funciones de forma, una por una

`polygon()` — El caballo de batalla

polygon() es la que más usarás. Toma una lista de pares de coordenadas que definen los vértices de una forma. Por defecto, las coordenadas son porcentajes del ancho y alto del elemento.

Un triángulo básico:

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

Se lee como: centro arriba, abajo izquierda, abajo derecha. Tres puntos, un triángulo.

Un paralelogramo (excelente para separadores de sección diagonales):

.parallelogram {
  clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
}

Un hexágono — la forma que comenzó todo mi viaje con clip-path:

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

Seis puntos, seis pares de coordenadas. Eso es todo.

La sintaxis se vuelve verbosa rápidamente con muchos puntos, que es exactamente por qué un generador visual es tan útil. Calcular manualmente los vértices para una forma de estrella, por ejemplo, significa hacer trigonometría que definitivamente no quieres hacer a mano.

Una estrella de cinco puntas como referencia:

.star {
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%,
    79% 91%, 50% 70%, 21% 91%, 32% 57%,
    2% 35%, 39% 35%
  );
}

Diez pares de coordenadas. Definitivamente no algo que quieras escribir manualmente.

`circle()` — Más simple, menos flexible

.avatar {
  clip-path: circle(50%);
}

Esto recorta el elemento a un círculo con radio del 50% — efectivamente lo mismo que border-radius: 50% pero sin afectar el layout. También puedes especificar el punto central:

.off-center-circle {
  clip-path: circle(40% at 60% 50%);
}

Opinión honesta: border-radius sigue siendo generalmente la mejor opción para imágenes circulares simples. clip-path: circle() tiene más sentido cuando necesitas que el círculo interactúe con otros efectos clip-path, o cuando quieres animarlo.

`ellipse()` — La prima alargada del círculo

.ellipse-crop {
  clip-path: ellipse(60% 40% at 50% 50%);
}

Los dos primeros valores son los radios horizontal y vertical. Útil para recortes de imágenes ovales o para crear formas estilo lens-flare.

`inset()` — La subestimada

Esta no recibe suficiente atención. inset() recorta el elemento a una región rectangular definida por valores de inserción desde cada borde — como un padding al revés:

.inset-crop {
  clip-path: inset(10px 20px 10px 20px);
  /* arriba derecha abajo izquierda */
}

También puedes agregar border-radius al rectángulo insertado:

.rounded-inset {
  clip-path: inset(10% round 12px);
}

Donde inset() realmente brilla es para recortes de tarjetas y efectos de muesca — esos diseños donde una pieza de una tarjeta parece estar "perforada" en una esquina. Difícil con CSS estándar, trivial con inset() combinado con un fondo creativo.

Casos de uso del mundo real

Separadores de sección hero diagonales

El separador inclinado entre una sección hero y el contenido debajo es omnipresente. Así se hace:

.hero {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

Esto recorta el borde inferior del hero en un ángulo, creando un corte diagonal. El contenido debajo fluye naturalmente al espacio.

Avatares de usuario hexagonales

El clásico. Aplicar directamente a una etiqueta img:

.avatar-hex {
  width: 120px;
  height: 120px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  object-fit: cover;
}

object-fit: cover asegura que la imagen llene el espacio antes del recorte. Sin ello, obtienes letterboxing.

Decoraciones de tarjetas anguladas

Una tarjeta con una esquina inferior derecha recortada — un toque sutil que se lee como refinado:

.notched-card {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}

Las dos trampas que te atraparán

Trampa 1: clip-path se come tu box-shadow

Esto atrapa a casi todos la primera vez. Agregas una bonita sombra a una tarjeta, aplicas clip-path para ese corte diagonal, y la sombra desaparece. Eso es porque clip-path recorta todo fuera del límite de la forma — incluyendo sombras que se renderizan fuera de la caja del elemento.

La solución es filter: drop-shadow():

/* Esto se recorta */
.broken {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* Esto funciona correctamente */
.fixed {
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.2));
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

filter: drop-shadow() se aplica después del compositing, siguiendo el contorno de la forma visible real. Puedes combinarlo con el generador CSS Box Shadow para diseñar tu sombra y luego traducir los valores.

Trampa 2: Las áreas de hover y clic siguen el recorte

Esto es lógico una vez que lo piensas, pero sorprende a la gente. La región recortada ha desaparecido visual y funcionalmente. Los eventos del ratón no se disparan en el área recortada. Si tu diseño recorta una esquina donde un usuario podría razonablemente intentar hacer clic, ese clic no se registrará.

Animar clip-path (y cuándo no funciona)

La buena noticia: clip-path es animable. El navegador puede interpolar entre dos formas de polígono suavemente:

.btn {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 0.3s ease;
}

.btn:hover {
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
}

Esto anima un botón rectangular para tener una esquina de corte diagonal al hover. Limpio, suave, sin JavaScript.

La mala noticia: solo puedes animar entre la misma función de forma con el mismo número de puntos. Intentar hacer transición de circle() a polygon() produce un salto brusco — sin interpolación. Y la transición entre dos polígonos con diferentes conteos de puntos también falla.

clip-path responsive

¿Funciona clip-path de manera responsive? Sí, si usas valores basados en porcentajes.

/* Esto escala correctamente */
.responsive-diagonal {
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}

Los valores de píxeles fijos en clip-path no escalan:

/* Esto se verá mal en pantallas pequeñas */
.broken-responsive {
  clip-path: polygon(0 0, 800px 0, 800px 90%, 0 100%);
}

Usa porcentajes para cualquier forma que viva dentro de un contenedor fluido. Puedes combinar calc() con porcentajes para ajustes específicos:

.notched {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
}

Usar el generador

Escribir coordenadas de polígono a mano es un ejercicio en frustración. Un generador visual de clip-path cambia el flujo de trabajo por completo — arrastras controles en una vista previa, ves la forma en tiempo real, y copias el CSS cuando se ve bien.

Cómo sacarle el máximo partido:

Comenzar con un preset — la mayoría de los generadores incluyen triángulo, hexágono, paralelogramo, estrella y otras formas comunes. Comenzar desde un preset y luego arrastrar controles es más rápido que construir desde cero.
Usar la vista previa en contenido real — genera en una imagen de marcador de posición o div coloreado que se parezca a tu contenido real. Las formas se ven muy diferentes en un color sólido vs. una foto.
Verificar la salida en anchos de escritorio y móvil — una forma con ángulos poco profundos puede verse elegante en escritorio y apretada en un teléfono.
Copiar solo lo que necesitas — un generador te da la propiedad clip-path completa. Si la usas en un componente que también necesita filter: drop-shadow(), pega ambas juntas.

Combinar clip-path con otras herramientas CSS

clip-path rara vez vive en aislamiento en proyectos reales. Combinaciones comunes:

Degradados CSS: Recorta un fondo degradado a un polígono para secciones decorativas geométricas. El degradado se renderiza primero, luego la forma lo recorta.
CSS Flexbox: Flexbox maneja el diseño alrededor de tus elementos recortados. clip-path no afecta el flujo del documento — el elemento aún ocupa su rectángulo original en el diseño.
CSS Box Shadow: Diseña tus valores de sombra aquí, luego traduce a la sintaxis filter: drop-shadow() al aplicarlos a elementos recortados.

Soporte de navegadores: el panorama honesto

Las funciones de forma básicas de clip-path — polygon(), circle(), ellipse(), inset() — tienen soporte sólido en navegadores modernos. Chrome, Firefox, Safari y Edge los soportan todos sin prefijos.

Dónde aún puedes encontrar problemas:

iOS Safari antiguo (anterior a 13.4) necesitaba el prefijo -webkit- para formas básicas
Las versiones muy antiguas de Android WebView pueden tener problemas con rutas de polígonos complejas
El clip-path: url(#myClip) basado en SVG tiene mejor cobertura heredada para entornos más antiguos

Conclusión

clip-path es una de esas propiedades CSS que se siente casi demasiado poderosa una vez que te acostumbras a ella. Secciones diagonales, avatares geométricos, tarjetas con muesca — cosas que antes requerían recursos de imagen o soluciones SVG ahora toman unas pocas líneas de CSS.

Las cosas principales a recordar:

polygon() es el más versátil — usa porcentajes para comportamiento responsive
clip-path recorta box-shadow — usa filter: drop-shadow() en su lugar
Las áreas de clic y hover siguen el límite del clip
Anima solo entre formas de la misma función con el mismo conteo de puntos
Cuando dudes, usa un generador visual — la vida es demasiado corta para calcular vértices de hexágono a mano