Generador de formas del camino de clip CSS
Crea formas de polígonos, estrellas, insignias, hexágonos y chevrones con la moderna geometría CSS.
Se ejecuta en tu navegador. Tus archivos nunca salen de tu dispositivo. Cómo comprobarlo
…
Cómo hacerlo
- 1Paso 1: abre Generador de formas del camino de clip CSS e introduce tus datos
Escribe tus números o texto, añade tu archivo o elige las opciones que necesites. No se sube nada: todo se queda en tu navegador.
- 2Paso 2: qué hace Generador de formas del camino de clip CSS
Crea formas de polígonos, estrellas, insignias, hexágonos y chevrones con la moderna geometría CSS.
- 3Paso 3: lee el resultado y compáralo
El resultado aparece al instante. Cambia un valor para ver cómo varía la respuesta y quédate con la cifra que encaje en tu caso.
- 4Paso 4: cópialo o guárdalo
Copia el resultado o descárgalo. Para una decisión importante, confírmalo con la fuente oficial o con un asesor.
Sobre esta herramienta
Clip-path permite a los desarrolladores cortar elementos HTML e imágenes en polígonos geométricos y formas precisas sin necesidad de máscaras Photoshop o SVG. Seleccione entre presets populares, inspeccione la máscara renderizada en tiempo real y copie coordenadas de polígonos CSS puras listas para producción.
Consejos para mejores resultados
Tómate un momento para leer las opciones antes de empezar y prueba la herramienta primero con una muestra pequeña. Todo se ejecuta en tu navegador, en tu propio dispositivo, así que nada de lo que escribes o añades se sube, y al cerrar la pestaña se borra. Si algo no te parece bien, recarga la página e inténtalo de nuevo, o usa el enlace de informe de esta página para contarnos qué falló y poder arreglarlo. Si un resultado sigue sin convencerte, cambia un valor cada vez para ver qué campo importa más. Guarda esta página en marcadores si vas a necesitar la herramienta otra vez.
Datos rápidos
- Categoría: Imágenes
- Funciona en tu navegador, sin registro y sin subir nada.
- Lo que introduces se queda en tu dispositivo.
- Disponible en muchos idiomas.
- Contenido revisado por última vez:
Preguntas frecuentes
¿Qué es CSS Clip-Path?
The `clip-path` CSS property creates a clipping region that determines which parts of an element or image are visible.
¿Qué formas se incluyen como presets?
Los ajustes preestablecidos incluyen triángulo, hexágono, estrella de 5 puntos, insignia de descuento del producto, chevron de navegación y máscaras circulares.
¿Puedo grabar fotos y videos con esto?
Yes. Apply the generated clip-path CSS rule to any `<img>`, `<video>`, `<div>`, or card component in your stylesheet.
¿La ruta de clip afecta a los elementos clicables?
En los navegadores modernos, solo el área visible y sin recortar del elemento responde a eventos de desplazamiento del puntero y clic.