Generador de clip-path
Recorta elementos con formas: elige un polígono predefinido y arrastra sus puntos, o usa círculo, elipse e inset.
Las coordenadas se convierten a objectBoundingBox (0–1), así que el recorte escala con cualquier elemento. Las formas como <polygon>, <rect> o <circle> se convierten automáticamente en trazados y las transformaciones se aplican a las coordenadas.
Arrastra los puntos de la vista previa para cambiar la forma del polígono.
Cómo funciona el generador de clip-path
Crea formas clip-path de forma visual con polígonos predefinidos y puntos arrastrables, y copia CSS responsive basado en porcentajes.
Biblioteca de preajustes
Doce polígonos predefinidos (triángulos, flechas, estrellas, bocadillos de mensaje) más las formas básicas círculo, elipse e inset. Empieza por la forma más parecida a la que necesitas.
Puntos arrastrables
Cada vértice del polígono es un control en la vista previa en vivo. Arrastra para cambiar la forma, añade puntos intermedios para más detalle y quita los que no necesites: el CSS se actualiza mientras mueves.
Vista previa fantasma
La zona recortada sigue visible como un tenue fantasma, así que siempre ves qué parte del elemento original elimina la forma.
Coordenadas en porcentajes
Todas las coordenadas están en porcentajes, así que el mismo clip-path escala con elementos de cualquier tamaño: imágenes hero, tarjetas o secciones a ancho completo.
Preguntas frecuentes
clip-path define la región visible de un elemento: todo lo que queda fuera de la forma se oculta. Funciona con cualquier elemento, incluidas imágenes y videos, y afecta a la detección de clics: los clics fuera de la forma atraviesan el elemento.
Las coordenadas en porcentaje son relativas a la caja del elemento, así que un mismo valor funciona con cualquier tamaño y sigue siendo responsive. Las coordenadas en píxeles se romperían en cuanto el elemento cambiara de tamaño.
Sí: las transiciones entre dos polígonos con el mismo número de puntos se animan con suavidad y, en los navegadores modernos, las ejecuta el compositor. Es la base de los efectos de revelado y de las formas que se transforman (morphing).
clip-path es una forma vectorial de bordes nítidos; mask-image admite degradados de transparencia suaves e imágenes. Para recortes geométricos nítidos, clip-path es más sencillo y ligero.