Generador de clip-path CSS
Elige una forma y arrastra los puntos en la vista previa para ajustar. El código clip-path en porcentaje funciona con cualquier tamaño de elemento.
Cómo usarRecorte en formas con clip-path
Disponible en: 
Generador de clip-path CSS: para qué sirve
Elige una de las formas listas (triángulo, rombo, hexágono, pentágono, estrella, flecha, mensaje, esquinas cortadas, paralelogramo, círculo o elipse) y arrastra los puntos en la vista previa para ajustar. Las coordenadas quedan en porcentaje, así que el recorte funciona con cualquier tamaño.
Pruébalo con tu foto y copia la línea de clip-path lista.
Cómo usar
- Elige una forma.
- Arrastra los puntos para ajustar y prueba con una foto.
- Copia el clip-path y úsalo en tu CSS.
Cuándo usar
- Fotos con formas diferentes en sitios web.
- Secciones con esquinas inclinadas.
- Sellos, flechas y globos solo con CSS.
Preguntas frecuentes
¿Qué es clip-path?
Es una propiedad CSS que muestra solo la parte de un elemento que queda dentro de una forma. La imagen sigue completa en el archivo; solo se oculta lo que queda fuera de la forma.
¿Funciona en todos los navegadores?
Sí. polygon(), circle() y ellipse() funcionan en todos los navegadores actuales, sin prefijo.
¿Se puede animar?
Sí, entre dos polygon() con el mismo número de puntos, usando transition o animation en clip-path. Los puntos se mueven suavemente de una forma a la otra.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.