Generador de rutas de recorte CSS Clip-Path

Genera visualmente código de rutas de recorte CSS clip-path; admite polígonos, círculos, elipses y otras formas, y permite procesar imágenes por lotes.

Informe de error

Modo de ejecución en navegador: Tus datos se procesan en tu navegador y no se suben al servidor.

Velocidad y estabilidad: La velocidad de procesamiento depende de tu dispositivo y navegador. Para lotes grandes, la versión de escritorio puede ser más estable.

Cargando herramienta, espera...

Si la herramienta en línea no carga o no se ejecuta, prueba la herramienta de escritorio. https://tools.yikeaigc.com/

Uso de herramientas

Volver a la versión anterior

Define primero la ruta de recorte; luego copia el código o procesa imágenes por lotes

Tras elegir una forma predefinida, puedes arrastrar los puntos del polígono o cambiar a círculo, elipse o rectángulo inset y ajustar parámetros. El procesamiento por lotes usará la ruta actual. Al subir varias imágenes solo se muestran las primeras 20, pero se procesan todas.

Información de la ruta actual

Tipopolygon

Puntos de control3

Consejo: termina de configurar la ruta antes de copiar el código o procesar imágenes.

Vista previa en vivo En modo polígono puedes arrastrar los puntos azules; las coordenadas generan el CSS al instante.

Coordenadas: relativas al elemento; la esquina superior izquierda es 0% 0%. polygon(50% 0%, 100% 100%, 0% 100%)

Forma y preajustes Elige tipo y ajusta parámetros

Tipo de forma

Categoría predefinida

Parámetros de ruta Los valores admiten porcentajes

Texto de coordenadas

Radio

Centro X

Centro Y

Radio horizontal

Radio vertical

Centro X

Centro Y

arriba

derecha

abajo

izquierda

Esquinas redondeadas

Vista previa y salida El fondo solo afecta la vista previa y la exportación de imagen

Ancho de vista previa (px)

Alto de vista previa (px)

Color A

Color B

Ángulo del degradado

Vista previa

Mostrar límites del elemento Incluir prefijo -webkit Generar selector de clase

Generar código

El código se actualiza en tiempo real.

Aplicar ruta actual en lote Primero configure la ruta en el paso anterior y luego elija procesar imágenes.

Haz clic o arrastra imágenes Admite formatos comunes como JPG, PNG, WebP, GIF, BMP

No se ha seleccionado ninguna imagen.

Ajustes de salida PNG admite fondo transparente

Formato de salida

Modo de tamaño

Limitar lado largo (px)

Ancho personalizado (px)

Alto personalizado (px)

Calidad de salida92%

Exterior del recorte transparente Usar ruta actual

Esperando proceso.

Vista previa y resultado Tras subir, se muestran las primeras 20; se procesarán todos los archivos.

Imágenes pendientes0 imágenes

Selecciona imágenes para ver miniaturas.

Resultado0 imágenes

Las miniaturas se mostrarán al terminar.

Instrucciones

Instrucciones de uso del software

Diseñar la ruta de recorte: después de entrar en la herramienta, primero selecciona el tipo de forma en el paso “Diseñar ruta”. Puedes usar polígono, círculo, elipse o rectángulo inset.
Seleccionar una forma predefinida: puedes elegir un preset entre formas básicas, flechas e iconos, y formas decorativas, y luego ajustar los parámetros según sea necesario.
Editar los parámetros de la ruta: en los polígonos puedes arrastrar los puntos de control o introducir coordenadas porcentuales en el cuadro de texto de coordenadas; para círculos, elipses y rectángulos inset puedes rellenar directamente el radio, el punto central, los márgenes y las esquinas redondeadas.
Configurar el efecto de vista previa: puedes ajustar el ancho y alto de la vista previa, los colores del degradado y el ángulo del degradado, o elegir una imagen como contenido de vista previa.
Copiar el código CSS: después de confirmar el resultado, haz clic en “Copiar clip-path” o “Copiar CSS”. Puedes elegir si incluir el prefijo -webkit y el selector de clase.
Procesar imágenes por lotes: haz clic en “Siguiente: procesamiento por lotes”, selecciona varias imágenes, configura el formato de salida, la calidad y el modo de tamaño, y empieza el procesamiento.
Descargar los resultados: una vez completado el procesamiento, haz clic en “Descargar todos los resultados ZIP”. Los archivos de salida intentarán conservar el nombre original y, si hay nombres duplicados, se añadirá automáticamente un número para diferenciarlos.

Preguntas frecuentes

Respuesta: clip-path se usa para recortar un elemento con una forma específica. Se utiliza a menudo para mostrar imágenes con formas irregulares, diseñar bordes de tarjetas, dar forma a botones, crear gráficos decorativos en páginas web y efectos interactivos.

Respuesta: polygon genera un polígono mediante varios puntos de coordenadas; circle genera un área de recorte circular; ellipse genera un área de recorte elíptica; inset genera un rectángulo inset y admite parámetros de esquinas redondeadas.

Respuesta: las coordenadas se expresan en porcentajes; por ejemplo, 50% 0% representa la posición central superior del elemento, y 100% 100% representa la esquina inferior derecha. Cada punto se separa con una coma y se necesitan al menos 3 puntos.

Respuesta: -webkit-clip-path se usa para compatibilidad con algunos entornos basados en WebKit. Para mejorar la compatibilidad, puedes conservar tanto la versión con prefijo como la sintaxis estándar.

Respuesta: Puedes seleccionar formatos de imagen comunes como entrada; la salida admite PNG, JPEG y WebP. PNG es adecuado para conservar áreas transparentes, JPEG para generar archivos más pequeños y WebP para equilibrar tamaño y calidad de imagen.

Respuesta: La herramienta intentará conservar el nombre original del archivo y reemplazará la extensión según el formato de salida. Si existen archivos con el mismo nombre, se añadirá un número al final del nombre para evitar que los resultados se sobrescriban entre sí.