Clip Path Maker
Recorta cualquier elemento con clip-path: elige una forma, arrastra los vértices y copia el código exacto.
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
Hecho por
Miguel Ángel Colorado Marin (MACM)
Hecho por
Miguel Ángel Colorado Marin (MACM)
Full-Stack Developer · Guadalajara, España
Desarrollo aplicaciones web, herramientas digitales y proyectos completos — desde el diseño hasta el despliegue.
La propiedad clip-path recorta un elemento según una forma geométrica: todo lo que queda fuera del área definida se vuelve transparente. Es la técnica estándar para crear ángulos diagonales, tarjetas hexagonales, estrellas, flechas o imágenes con siluetas personalizadas sin tocar Photoshop. Este generador te da las formas más habituales ya calculadas (triángulo, rombo, pentágono, hexágono, estrella, chevron, flecha, bocadillo, cruz) y además un editor libre donde arrastras cada vértice sobre la vista previa para conseguir tu propia silueta; los valores se expresan siempre en porcentajes, así que el resultado es totalmente responsive.
Características
- ✓10 formas predefinidas listas para usar
- ✓Vértices arrastrables sobre la vista previa
- ✓Modo personalizado con puntos ilimitados
- ✓Círculo y elipse con controles por porcentaje
- ✓100% en el navegador, sin registro
¿Cómo generar un clip-path?
- 1
Elige una forma base
Empieza desde un preset o desde el modo personalizado.
- 2
Arrastra los puntos
Ajusta cada vértice sobre la vista previa o añade más.
- 3
Aplica el estilo
Pega "clip-path: ..." en el elemento que quieras recortar.
- 4
Verifica el responsive
Al usar porcentajes, la forma escala con el tamaño del elemento.
Preguntas frecuentes
¿El clip-path afecta al layout?
No. El elemento sigue ocupando su espacio original; solo se oculta lo pintado fuera de la forma. Si necesitas que el resto no reserve espacio, combina clip-path con dimensiones o márgenes ajustados.
¿Funciona con imágenes y vídeos?
Sí, clip-path funciona sobre cualquier elemento HTML: imágenes, vídeos, iframes, texto o gradientes. Los porcentajes mantienen la proporción de la forma sea cual sea el contenido.
¿Por qué usar porcentajes en vez de píxeles?
Los porcentajes son relativos al tamaño del propio elemento, así que la forma se adapta automáticamente a móvil, tablet y escritorio sin escribir media queries.
Herramientas relacionadas
Incrusta Clip Path Maker en tu web
Integra Clip Path Maker en cualquier página web con un simple iframe. Gratis, con atribución a miguelacm.es.
<iframe
src="https://miguelacm.es/embed/clip-path-maker"
width="100%"
height="700"
frameborder="0"
title="Clip Path Maker — miguelacm.es"
></iframe>