Cómo usar el generador de clip-path CSS
- Elige un modo de forma arriba: Polígono, Círculo, Elipse, o Inset.
- En modo Polígono, arrastra cualquier punto directamente sobre la vista previa en vivo, o parte de un preset de forma (Triángulo, Flecha, Chevrón, Estrella, Burbuja de mensaje) y ajusta los puntos desde ahí, añade o quita puntos según necesites (mínimo tres).
- En modo Círculo o Elipse, arrastra el punto central sobre la vista previa y escribe valores exactos de radio. En modo Inset, escribe desplazamientos de borde exactos y un porcentaje opcional de redondeo de esquina.
- Opcionalmente sube una imagen de muestra para poder previsualizar cómo tu forma recorta una foto real en lugar de una caja de color plano.
- Haz clic en Copiar CSS para copiar una declaración
clip-path: ...;lista para pegar.
Todo ocurre localmente en tu navegador, sin subidas, sin cuenta, sin viaje de ida y vuelta a un servidor.
Construir formas clip-path visualmente en lugar de adivinar coordenadas
Escribir a mano coordenadas clip-path: polygon(...) significa imaginar una cuadrícula de porcentajes en tu cabeza y esperar que los números encajen como imaginas, un ciclo lento y propenso a errores de editar-guardar-refrescar en las herramientas de desarrollo. Esta herramienta invierte eso: arrastra puntos reales sobre una vista previa en vivo y observa la forma actualizarse al instante, o parte de un preset ya hecho y ajústalo visualmente, y solo mira el CSS generado una vez que ya se ve bien.
Las cuatro funciones de forma clip-path
- Polígono, cualquier forma de bordes rectos construida a partir de una lista de puntos, cada uno un par (x%, y%). Este es el modo más flexible: triángulos, flechas, estrellas, chevrones, cintas y siluetas totalmente personalizadas son todos solo polígonos con distinto número y posición de puntos.
- Círculo, recorta a un círculo perfecto con un radio y punto central elegidos.
- Elipse, recorta a un óvalo con radios horizontal y vertical independientes, útil para igualar la propia proporción de un banner ancho o una tarjeta alta.
- Inset, recorta a un rectángulo retraído desde cada uno de los cuatro bordes de la caja, con un radio de esquina redondeada opcional, el modo más simple para un look plano recortado o enmarcado.
Presets de forma, verificados en lugar de adivinados
Los cinco presets integrados no son números arbitrarios: Flecha, Chevrón y Burbuja de mensaje se comprobaron contra ejemplos reales de coordenadas clip-path publicados de forma independiente, y Estrella se construye a partir de trigonometría real: una estrella regular de 5 puntas (un pentagrama verdadero) alterna diez puntos entre un radio externo y un radio interno fijado exactamente en 1/phi² del externo, siendo phi la proporción áurea, la proporción matemáticamente exacta para una estrella regular, no una forma calculada a ojo. Haz clic en cualquier preset para cargarlo, y sigue arrastrando puntos para ajustarlo más.
Previsualizar sobre una foto real
La mayoría de las veces una caja de color es suficiente para ver cómo se ve una forma, pero a veces quieres comprobar cómo un clip-path recorta una foto real, para una imagen de portada, una foto de perfil, o una miniatura de producto. Sube cualquier imagen y la vista previa en vivo cambia a recortar esa foto en lugar de la caja de marcador de posición, todo en tu navegador; la imagen nunca se sube a ningún sitio.
Usos habituales
- Formas de recorte para imágenes de portada y tarjetas (bordes angulados, flechas, chevrones).
- Decoraciones de cinta e insignia “Nuevo” / “Oferta” usando los presets de Flecha o Chevrón.
- Llamadas de atención tipo burbuja de mensaje para testimonios o maquetas de chat.
- Marcos de foto de perfil/miniatura circulares o de rectángulo redondeado (Círculo, Elipse, o Inset con redondeo).
- Valoraciones con estrellas o formas de icono decorativo solo con CSS.
- Animaciones de revelado al hacer scroll o hover que transicionan las coordenadas de un clip-path.
