Elysia Tools
Navegación
Design
Genera propiedades de ruta de recorte CSS para formas personalizadas
Ejecución
Completa el formulario, ejecuta la herramienta y revisa el resultado en un solo lugar.
Ejemplos
Relacionado
Listo para ejecutar
Guía de uso de la herramienta
El Generador de Ruta de Recorte CSS es una herramienta intuitiva diseñada para crear propiedades 'clip-path' precisas, permitiéndote recortar elementos HTML en formas geométricas complejas sin necesidad de escribir código manualmente.
Contexto
Necesito que las fotos de perfil de los usuarios en un dashboard tengan una forma hexagonal uniforme.
Problema
Recortar imágenes manualmente es ineficiente y difícil de mantener en múltiples perfiles.
Cómo usarlo
Selecciona 'Hexagon' en el menú de formas y ajusta el tamaño al 100%.
shape: hexagon, size: 100Resultado
Obtienes el código 'clip-path: polygon(...)' listo para aplicar a la clase CSS de las imágenes de perfil.
Contexto
Quiero resaltar una oferta especial en la página de inicio usando un contenedor con forma de estrella.
Problema
Calcular los puntos de coordenadas para una estrella en CSS es complejo y propenso a errores.
Cómo usarlo
Elige 'Star', ajusta el número de lados a 5 y modifica el radio para obtener la proporción deseada.
Es una propiedad que permite definir una región de recorte para un elemento, ocultando las partes que quedan fuera de la forma especificada.
Sí, puedes elegir entre varias formas predefinidas como polígonos, estrellas y círculos, ajustando sus dimensiones y vértices.
La mayoría de los navegadores modernos soportan clip-path, aunque se recomienda verificar la compatibilidad si tu proyecto requiere soporte para versiones muy antiguas.
Simplemente copia el valor de la propiedad 'clip-path' y pégalo en la clase CSS del elemento que deseas recortar.
No, esta herramienta genera exclusivamente el código CSS necesario para aplicar el recorte a elementos HTML existentes.
shape: star, sides: 5, radius: 1.2Resultado
Generación instantánea de la propiedad CSS que transforma un contenedor cuadrado en una estrella perfecta.