¿Diferencia entre clip-path y border-radius?

`border-radius` redondea las esquinas de un rectángulo - sigue siendo un rectángulo por debajo. `clip-path` reemplaza el rectángulo por cualquier polígono (o círculo, elipse o incluso un path SVG) y oculta todo lo que queda fuera. Usa border-radius para tarjetas redondeadas; usa clip-path cuando la forma no es un rectángulo redondeado - triángulos, hexágonos, flechas hacia un tooltip, esquinas de cinta, etc.

¿clip-path afecta al layout?

No. El elemento conserva su caja original para el layout - márgenes, bordes y contenido siguiente se posicionan como si no hubiera recorte. Las áreas de hover y clic también mantienen el rectángulo original por defecto, lo cual sorprende: un botón recortado en triángulo aún dispara hover cuando el usuario está en la esquina vacía. Añade reglas `pointer-events` o envuelve la forma visible en un SVG si necesitas que el hit testing siga al clip.

¿Puedo animar clip-path?

Sí, pero solo entre paths con el mismo número de puntos - el navegador interpola `polygon(0 0, 100% 0, 50% 100%)` a otro polígono de 3 puntos, pero no a uno de 4. Lo mismo con `circle()` y `ellipse()`: misma función, parámetros distintos = anima; mezclar funciones = no. Para morphs complejos, usa librerías de animación de paths SVG.

¿Por qué mi clip-path corta el borde?

Los bordes están dentro del clip, así que un borde grueso en un div recortado en triángulo se corta por las diagonales. Dos arreglos: usa un SVG con atributo `stroke` (limpio, escala bien), o usa `filter: drop-shadow()` con poco spread en lugar de un borde (la sombra sigue la forma visible).

¿Soporte de navegadores?

`clip-path: polygon(...)` y las formas básicas (`circle`, `ellipse`, `inset`) están soportadas en todos los navegadores modernos. Los clips basados en path (`path('...')`) requieren Chrome 88+, Safari 13.1+, Firefox 97+. El elemento SVG ` ` es un fallback portable para navegadores antiguos y soporta paths en todas partes.

Generador de clip-path CSS

Crea clip-paths visualmente - triángulo, hexágono, estrella, bocadillo - con vista previa en vivo y CSS listo para copiar.

Preajustes

Puntos del polígono (x% y%, separados por comas)

CSS

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

Vista previa

Elige un preajuste, mira el recorte en vivo sobre una imagen de muestra, copia el CSS. Los puntos del polígono están listados bajo la vista previa - ajusta los porcentajes a mano si un preajuste se acerca sin ser perfecto. Alterna el fondo entre imagen, color sólido y degradado: clip-path no añade contorno ni anti-aliasing, el contraste con el fondo importa.

Cómo usarla

Elige un preajuste
Triángulo, rombo, pentágono, hexágono, octágono, estrella, flecha, mensaje, cruz, ticket - un clic carga el polígono.
Ajusta los puntos
Edita las coordenadas en porcentaje bajo la vista previa para afinar. La forma se actualiza al escribir.
Prueba el fondo
Alterna entre imagen, color sólido y degradado para confirmar que la forma recortada se lee contra las superficies en que vivirá.
Copia el CSS
La declaración `clip-path: polygon(...)` completa está lista para pegar en tu hoja de estilos.

¿Qué es?

Un generador de clip-path construye visualmente la propiedad CSS `clip-path`. La forma más común es `polygon(x1 y1, x2 y2, ...)` - una lista de coordenadas en porcentaje que define la región visible del elemento; todo lo de fuera queda oculto. Otras funciones de forma (`circle()`, `ellipse()`, `inset()`, `path()`) cubren formas redondas y arbitrarias. El resultado va acelerado por GPU y es animable entre variantes de la misma forma.

Cuándo usarla

Cuadrículas de avatares hexagonales, esquinas de cinta sobre tarjetas, punteros triangulares de tooltips y burbujas de chat, secciones hero con corte diagonal, formas de ticket para ofertas, estrellas de rating como rellenos recortados, bocadillos de mensaje, separadores inclinados entre secciones de página, y fondos de icono sin SVG.

Errores comunes

Olvidar que clip-path no cambia el área de hit del elemento - el usuario puede pulsar en la esquina triangular vacía y aun así disparar el botón. Intentar animar entre polígonos con distinto número de puntos y obtener un salto en lugar de interpolación. Aplicar clip-path a un elemento con borde grueso y sorprenderse cuando se corta. Usar porcentajes sin fijar la relación de aspecto - un triángulo en un elemento ancho se aplana a una franja.

Preguntas frecuentes

¿Diferencia entre clip-path y border-radius?: `border-radius` redondea las esquinas de un rectángulo - sigue siendo un rectángulo por debajo. `clip-path` reemplaza el rectángulo por cualquier polígono (o círculo, elipse o incluso un path SVG) y oculta todo lo que queda fuera. Usa border-radius para tarjetas redondeadas; usa clip-path cuando la forma no es un rectángulo redondeado - triángulos, hexágonos, flechas hacia un tooltip, esquinas de cinta, etc.
¿clip-path afecta al layout?: No. El elemento conserva su caja original para el layout - márgenes, bordes y contenido siguiente se posicionan como si no hubiera recorte. Las áreas de hover y clic también mantienen el rectángulo original por defecto, lo cual sorprende: un botón recortado en triángulo aún dispara hover cuando el usuario está en la esquina vacía. Añade reglas `pointer-events` o envuelve la forma visible en un SVG si necesitas que el hit testing siga al clip.
¿Puedo animar clip-path?: Sí, pero solo entre paths con el mismo número de puntos - el navegador interpola `polygon(0 0, 100% 0, 50% 100%)` a otro polígono de 3 puntos, pero no a uno de 4. Lo mismo con `circle()` y `ellipse()`: misma función, parámetros distintos = anima; mezclar funciones = no. Para morphs complejos, usa librerías de animación de paths SVG.
¿Por qué mi clip-path corta el borde?: Los bordes están dentro del clip, así que un borde grueso en un div recortado en triángulo se corta por las diagonales. Dos arreglos: usa un SVG con atributo `stroke` (limpio, escala bien), o usa `filter: drop-shadow()` con poco spread en lugar de un borde (la sombra sigue la forma visible).
¿Soporte de navegadores?: `clip-path: polygon(...)` y las formas básicas (`circle`, `ellipse`, `inset`) están soportadas en todos los navegadores modernos. Los clips basados en path (`path('...')`) requieren Chrome 88+, Safari 13.1+, Firefox 97+. El elemento SVG `<clipPath>` es un fallback portable para navegadores antiguos y soporta paths en todas partes.