Generador de Clip Path
Recorta elementos en flechas, estrellas, hexágonos o tus propios polígonos: arrastra puntos en el lienzo y copia el código clip-path.
Arrastra puntos para remodelar · doble clic en el lienzo para añadir un punto
Cómo usar el generador de Clip Path
- Elige una forma predefinida, o empieza arrastrando los puntos del pentágono por defecto.
- Haz doble clic en cualquier parte del lienzo para insertar un nuevo punto en el borde más cercano.
- Selecciona un punto y pulsa «Eliminar punto» para quitarlo (mínimo 3 puntos).
- Cambia al modo círculo, elipse o inset para formas paramétricas con esquinas redondeadas.
- Copia la declaración clip-path: los porcentajes mantienen la forma responsiva a cualquier tamaño.
Acerca de este generador de Clip Path
La propiedad CSS clip-path recorta un elemento a una forma básica — polígono, círculo, elipse o inset — ocultando todo lo que queda fuera. Es la forma estándar de construir diseños no rectangulares: divisores de sección en ángulo, rejillas de imágenes hexagonales, flechas, bocadillos de diálogo y valoraciones de estrellas, todo sin imágenes ni SVG.
Este editor te permite diseñar formas visualmente: arrastra vértices de polígono en el lienzo, haz doble clic para añadir puntos, o empieza desde 15 presets afinados a mano. Todas las coordenadas son porcentajes, así que tus formas escalan con el elemento. La salida incluye el prefijo -webkit-clip-path para versiones antiguas de Safari, y una clase Tailwind de valor arbitrario para proyectos utility-first.
FAQ de Clip Path
¿Cómo añado o elimino puntos del polígono?
Haz doble clic en cualquier parte del lienzo: se inserta un nuevo punto en el borde más cercano a ese lugar. Para eliminar un punto, haz clic en él para seleccionarlo (se vuelve rojo) y pulsa «Eliminar punto». Un polígono siempre conserva al menos 3 puntos.
¿Qué sistema de coordenadas usa clip-path polygon?
Cada punto es un par x/y medido desde la esquina superior izquierda del elemento. Este generador usa porcentajes, así que 0% 0% es la esquina superior izquierda y 100% 100% la inferior derecha. Las coordenadas en porcentaje escalan automáticamente con el elemento, manteniendo tu forma responsiva.
¿Puedo animar un clip-path?
Sí: clip-path es animable en CSS siempre que las formas inicial y final sean del mismo tipo con el mismo número de puntos (para polígonos). Diseña tus dos estados aquí, mantén el número de puntos y transiciona entre ellos con transition: clip-path .3s.
¿clip-path afecta a los elementos hijos y al overflow?
clip-path recorta todo el elemento incluyendo sus hijos, bordes e incluso el box-shadow: todo lo que queda fuera de la forma se oculta y no es clicable. Si necesitas una sombra alrededor de una forma recortada, aplica drop-shadow() como filtro en un elemento padre.
¿Cuál es la diferencia entre clip-path y SVG clipPath?
Las formas básicas de clip-path CSS (polígono, círculo, elipse, inset) cubren la mayoría de las necesidades de diseño con una sola línea de código y son animables. SVG clipPath admite rutas complejas con curvas: usa formas CSS para diseños geométricos (esta herramienta) y SVG cuando necesites curvas bezier.