Generador de Clip Path
Diseña clip-paths CSS complejos visualmente.
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);- Haz clic y arrastra para reformar
- Usa presets para formas rápidas
- Prueba el modo 'polygon' para formas personalizadas
Herramientas recomendadas
Utilidades seleccionadas que podrían serte útiles
Recortar formas personalizadas con CSS clip-path
Resumen
La propiedad CSS clip-path te permite recortar un elemento en una forma personalizada —un triángulo, hexágono, flecha, blob o cualquier polígono— sin editar imágenes. Es una forma potente de añadir diseño no rectangular sin archivos extra. Como escribir las coordenadas a mano es engorroso, este generador de clip-path te deja arrastrar puntos visualmente y copia el CSS exacto, todo en tu navegador.
Cómo usar (paso a paso)
- 1
Elige o dibuja una forma
Parte de un preset (triángulo, hexágono, círculo) o coloca puntos para definir un polígono personalizado.
- 2
Arrastra los puntos
Mueve las esquinas en la vista previa en vivo hasta que la forma quede bien.
- 3
Copia el CSS de clip-path
Pega el valor de clip-path generado en tu elemento para recortarlo a esa forma.
Cómo Funciona
Eliges o dibujas una forma y la herramienta la define con clip-path, normalmente un polygon() de coordenadas en porcentaje, o un preset como circle() o ellipse(). Todo lo que queda fuera de la forma se vuelve transparente, así que el elemento se ve solo dentro del contorno. Arrastras los puntos en una vista previa en vivo y la herramienta escribe el valor de clip-path correspondiente para pegarlo en cualquier elemento.
Cuándo usarlo
Recortar una imagen o sección en una forma angulada o geométrica. Crear un separador diagonal entre secciones de página. Hacer un avatar o insignia hexagonal. Añadir una forma de flecha o bocadillo a un aviso. Diseñar un hero o tarjeta no rectangular. Aprender cómo las coordenadas de un polígono se mapean a una forma visible.
Preguntas Frecuentes
Se recorta: se vuelve totalmente transparente y no interactiva, así que los clics la atraviesan. El elemento solo se muestra y responde dentro del contorno de la forma; la caja de maquetación subyacente sigue ocupando su espacio original.
Notas Importantes
clip-path recorta visualmente, pero la caja del elemento sigue ocupando todo su espacio rectangular en la maquetación, lo que puede causar solapamientos o sorpresas de espaciado. Además, el contenido recortado se oculta, no se elimina: no lo uses para esconder información sensible.