Generador de clip-path CSS
Elige una forma, arrastra los controladores sobre la imagen y copia el CSS de clip-path listo para usar. Agrega o quita puntos del polígono, escribe coordenadas exactas y previsualiza sobre tu propia imagen sin subirla.
Última actualización:
Arrastra los controladores. Haz doble clic en un borde para agregar un punto; selecciona un punto y pulsa Supr para eliminarlo.
Cómo usar Generador de clip-path CSS
- Elige una forma de los ajustes predefinidos, por ejemplo Hexágono, Estrella, Círculo o Inset.
- Arrastra los controladores en la vista previa. En los polígonos, haz doble clic en un borde para agregar un punto; selecciona un punto y pulsa Supr para eliminarlo.
- Ajusta con precisión con la tabla de coordenadas o las flechas del teclado (mantén Shift para pasos del 5%); activa el ajuste a la cuadrícula para obtener números redondos.
- Prueba con tu propia imagen usando Mi imagen, o cambia el color de fondo de la vista previa.
- Pulsa Copiar CSS y pega la declaración clip-path en tu hoja de estilos.
Funciones de forma de clip-path
| Función | Sintaxis | Notas |
|---|---|---|
polygon() | polygon(x1 y1, x2 y2, x3 y3, …) | Tres o más puntos, unidos en orden y cerrados automáticamente. Los porcentajes son relativos al ancho (x) y a la altura (y) del elemento. |
circle() | circle(radius at cx cy) | Un radio en porcentaje es relativo a √(ancho² + alto²) / √2. Las palabras clave closest-side y farthest-side también funcionan. |
ellipse() | ellipse(rx ry at cx cy) | rx es relativo al ancho y ry a la altura. |
inset() | inset(top right bottom left round radius) | Usa la misma forma abreviada de 1 a 4 valores que margin; round acepta valores de border-radius. |
Ejemplo: clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); recorta cualquier elemento en un hexágono de lados planos que se escala con él.
Consejos para usar clip-path
- Anima entre formas: los polígonos con el mismo número de puntos hacen transiciones suaves, p. ej.
transition: clip-path .4s easemás un polígono distinto en:hover. Agrega puntos a la forma más simple (doble clic en un borde) para que ambas tengan la misma cantidad. - Sombras: el propio
box-shadowde un elemento recortado se corta. Coloca el elemento en un contenedor y usafilter: drop-shadow()en el contenedor; crea el filtro con el Generador de filtros CSS. - Imágenes: combina
clip-pathconobject-fit: coverpara que las fotos llenen la forma sin estirarse. - Los clics siguen la forma: solo el área visible recibe eventos del puntero, lo que resulta útil para botones no rectangulares.
- ¿Solo esquinas simples? Para rectángulos redondeados,
border-radiuses más ligero y mantiene intactos los bordes y las sombras; prueba el Generador de border-radius CSS.
Preguntas frecuentes
¿Qué hace clip-path en CSS?
clip-path oculta todas las partes de un elemento que quedan fuera de una forma que tú defines. El elemento mantiene su tamaño normal en el diseño, pero solo se pinta el área dentro de la forma y solo esa área responde a los clics y al pasar el cursor.
¿Qué formas puede usar clip-path?
Las funciones de forma básicas son polygon(), circle(), ellipse() e inset(). También puedes hacer referencia a un <clipPath> de SVG con url(#id), y los navegadores más recientes admiten path() y xywh(). Este generador crea las cuatro formas básicas, que funcionan en todos los navegadores modernos.
¿Cómo se miden los porcentajes en polygon()?
Cada punto es un par x y. Los valores en porcentaje son relativos a la caja de referencia del elemento (la border box por defecto): 0% 0% es la esquina superior izquierda y 100% 100% la inferior derecha. Como son relativos, la forma se escala con el elemento.
¿Qué significa un radio en porcentaje en circle()?
En circle(50% at 50% 50%) el porcentaje del radio se mide respecto a la diagonal del elemento dividida entre la raíz cuadrada de 2, así que en un elemento cuadrado el 50% toca los cuatro lados. En un rectángulo no equivale al 50% del ancho; usa ellipse() si quieres radios basados en el ancho y la altura.
¿Puedo animar clip-path?
Sí. clip-path hace transiciones y animaciones suaves entre dos formas del mismo tipo y, en polygon(), ambas formas deben tener el mismo número de puntos. Agrega transition: clip-path .4s ease y cambia la forma en :hover.
¿Todavía necesito -webkit-clip-path?
clip-path sin prefijo con formas básicas funciona en todas las versiones actuales de Chrome, Edge, Firefox y Safari (Safari desde la 13.1). La línea -webkit- solo ayuda a versiones muy antiguas de Safari e iOS, por eso está desactivada por defecto.
¿clip-path funciona con box-shadow o bordes?
La sombra y el borde también se recortan, porque forman parte del elemento. Para obtener una sombra que siga la forma, envuelve el elemento recortado y usa filter: drop-shadow() en el contenedor.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.