Generador de Rutas de Clip CSS
¿Buscas una forma fácil de crear formas complejas con CSS? Nuestro generador de clip-path CSS gratuito te permite diseñar visualmente y exportar código clip-path para las funciones polygon, circle, ellipse y path(). Ya sea que necesites un corte diagonal, una forma de estrella, un globo de diálogo o cualquier polígono personalizado, puedes arrastrar los puntos de control en un lienzo en vivo, ajustar coordenadas y copiar CSS listo para producción al instante. No necesitas memorizar sintaxis ni calcular puntos manualmente — nuestra herramienta se encarga de las matemáticas para que puedas centrarte en el diseño. Perfecto para páginas de aterrizaje, secciones hero, máscaras de imagen y diseños creativos. ¡Pruébalo ahora y ve tus formas cobrar vida en tiempo real!
Qué es
La propiedad CSS clip-path te permite definir una región visible en cualquier elemento HTML — todo lo que está fuera de la región se recorta. Es una de las herramientas más potentes del CSS moderno para crear diseños no rectangulares. A diferencia de overflow: hidden, que solo recorta al cuadro del elemento, clip-path admite geometría compleja, incluidos polígonos con números arbitrarios de vértices, círculos con radios ajustables, elipses en cualquier ángulo e incluso rutas basadas en SVG mediante la función path(). Valores comunes de clip-path: • polygon() — define una forma cerrada con una lista de puntos x,y. Ejemplo: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) crea un diamante. • circle() — dibuja un círculo con un radio y una posición opcional. Ejemplo: circle(40% at 50% 50%). • ellipse() — dibuja una elipse con dos radios. Ejemplo: ellipse(60% 30% at 50% 50%). • inset() — recorta una región rectangular con radio de borde opcional. Ejemplo: inset(10% round 8px). • path() — utiliza una cadena de ruta SVG para máxima flexibilidad. El soporte en navegadores es excelente — todos los navegadores modernos (Chrome 55+, Firefox 54+, Safari 9+, Edge 79+) admiten la sintaxis estándar sin necesidad del prefijo -webkit-. La propiedad clip-path funciona en imágenes, divs, encabezados, elementos SVG y más. Combinada con animaciones CSS, puedes crear efectos de transformación suave entre formas. Nuestro generador facilita la escritura de la sintaxis de clip-path. En lugar de adivinar porcentajes, arrastras puntos de control en un lienzo visual y la herramienta genera CSS limpio con prefijos. También puedes importar valores de clip-path existentes para editarlos, cambiar entre unidades de coordenadas (porcentajes o píxeles) y exportar el resultado como un bloque de código listo para pegar.
Cómo usar
- Abre el Generador de Clip Path CSS en tu navegador. Aparecerá un lienzo en blanco con un elemento de muestra.
- Elige un preset de forma desde la barra de herramientas — triángulo, hexágono, estrella, flecha, diamante, o selecciona 'Personalizado' para empezar desde cero.
- Arrastra los puntos de control en el lienzo para redibujar el polígono. Cada punto se ajusta a la cuadrícula para mayor precisión. Puedes agregar nuevos puntos haciendo clic en el borde o eliminar puntos haciendo clic derecho.
- Ajusta la configuración global: elige entre salida en porcentaje o píxeles, alterna la regla de relleno (nonzero vs evenodd) y establece transform-origin si planeas animar la forma.
- Copia el CSS generado desde el panel de salida. El código incluye la propiedad clip-path y los prefijos de navegador necesarios. Pégalo en tu hoja de estilos o en el atributo style inline.
- Prueba en distintos navegadores usando el comprobador de compatibilidad integrado, luego aplica transiciones CSS para crear efectos animados de transformación de clip-path.
Ejemplos
Entrada: Polígono: 50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%
Proceso: Mapea 5 puntos en el plano de coordenadas → Conéctalos secuencialmente → Crea una forma de pentágono
Resultado: clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)
Entrada: Círculo: circle(50% at 50% 50%)
Proceso: Definir radio 50% → Centro en 50%,50% → Generar ruta de elipse
Resultado: clip-path: circle(50% at 50% 50%)
Entrada: Recorte interno: inset(10% 20% 30% 40% round 12px)
Proceso: Calcular 4 desplazamientos → Aplicar border-radius → Recortar área de contenido
Resultado: clip-path: inset(10% 20% 30% 40% round 12px)
Búsquedas Relacionadas
La gente también busca: css, ruta de clip, formas, polígono, camino.
cssruta de clipformaspolígonocamino
Preguntas Frecuentes
¿Cuál es la diferencia entre clip-path y overflow: hidden?
overflow: simplemente recorta el contenido al cuadro delimitador rectangular del elemento. No puede crear cortes diagonales ni polígonos complejos. clip-path, en cambio, define una región de recorte personalizada que puede tener cualquier forma — círculos, estrellas, flechas o polígonos arbitrarios con decenas de vértices. Si necesitas un recorte rectangular, overflow funciona bien; para cualquier cosa no rectangular, clip-path es la opción adecuada.
¿Puedo animar clip-path con transiciones CSS o animaciones con keyframes?
¡Sí! Puedes animar clip-path entre dos formas con el mismo número de puntos usando transiciones CSS o @keyframes. Para una transformación suave, tanto la función polygon() inicial como la final deben tener el mismo número de coordenadas de vértices. Por ejemplo, la transición de polygon(50% 0%, 100% 100%, 0% 100%) a polygon(50% 10%, 90% 90%, 10% 90%) funciona suavemente. Si el número de puntos difiere, el navegador cambiará instantáneamente sin interpolación.
¿Afecta clip-path a los eventos de clic y la accesibilidad?
clip-path cambia la visibilidad visual de un elemento pero NO cambia su cuadro delimitador en el DOM. Los eventos de clic, los rectángulos de enfoque y las regiones del lector de pantalla siguen el cuadro rectangular original. Esta es una fuente común de confusión: un elemento que parece un diamante aún ocupa su área rectangular completa para los eventos de puntero. Si necesitas una detección de impactos precisa, considera usar SVG con clipPath en su lugar.
¿Cómo creo un clip-path responsivo que se adapte a diferentes tamaños de pantalla?
Usa coordenadas basadas en porcentajes en polygon(), circle() o ellipse() en lugar de píxeles fijos. Los porcentajes son relativos al cuadro delimitador del elemento, por lo que tu forma se escala proporcionalmente al redimensionarse el elemento. Todas las formas generadas por nuestra herramienta usan porcentajes de forma predeterminada; solo asegúrate de no cambiar al modo de píxeles si la capacidad de respuesta es importante.
¿Puedo usar clip-path en imágenes de fondo y degradados?
Absolutamente. clip-path se aplica a todo el elemento, incluyendo su fondo, background-image y background-gradient. Puedes colocar un fondo degradado en un div y luego recortarlo en forma de hexágono; el degradado será visible solo dentro de la región recortada. Esta técnica es excelente para secciones hero creativas y marcos decorativos de imágenes sin necesidad de software externo de edición de imágenes.