01
Confirma antes de sustituir
Una estrella o flecha puede reemplazar tus puntos; primero verás una vista previa con la cantidad afectada. Después de aplicar, Deshacer restaura la forma anterior.
Herramientas HTML y CSS
Generador de Clip-Path CSSmueve puntos y exporta
Arrastra vértices o ajusta otra forma básica y revisa la declaración CSS resultante.
Generador de Clip-Path CSS
Vista previa de la forma
Resultado CSS
clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);Las coordenadas y el CSS se generan solo en tu navegador.
El CSS está listo para copiar.
Cuando una foto necesita un borde diagonal o una insignia debe ser hexagonal, escribir coordenadas polygon a ciegas lleva muchos intentos. El Generador de Clip-Path CSS muestra el contorno mientras mueves sus puntos.
Este Generador de Clip-Path CSS también trata circle, ellipse e inset con parámetros propios. La vista previa corresponde al código exportable y evita copiar un resultado anterior tras una edición.
Por qué usar este Generador de Clip-Path CSS
Ves el recorte y sus coordenadas antes de llevar el código al proyecto.
Mueve un vértice y observa el borde
Arrastra cada punto o escribe X e Y para afinarlo. Como editor de polígonos CSS, permite ver el resultado sin probar cada cambio en otra página.
Cambia de unidad sin alterar el dibujo
Los mismos puntos pueden expresarse en porcentajes o píxeles de un cuadro de 320 × 320 px. Así las formas clip-path conservan el mismo contorno en la vista previa.
De una plantilla al recorte correcto
02
Ajusta puntos y unidades
Cada marca en un borde inserta un punto intermedio. Selecciona un vértice para editar X/Y; el porcentaje escala con el elemento y px usa la referencia de 320 px.
03
Exporta solo código actual
La generación automática espera una breve pausa. Si la desactivas, usa el botón o Ctrl/Cmd + Intro; copiar y descargar se bloquean mientras el CSS esté desactualizado.
Controles de dibujo y CSS
Cuatro formas básicas
Edita polygon, circle, ellipse e inset con los parámetros que corresponden a cada una, sin simular círculos con muchos segmentos.
Puntos editables
Inserta un punto en un borde, arrástralo, introduce coordenadas o revisa su eliminación. El polígono nunca baja de tres vértices.
Plantillas reversibles
Triángulo, rombo, hexágono, estrella y flecha sirven de partida; una confirmación protege los puntos que ya cambiaste.
CSS listo para integrar
Este generador CSS clip-path emite una declaración estándar que puedes copiar o descargar como archivo CSS.
Límites de coordenadas y recorte
- Los píxeles usan un tamaño fijo
- El modo px calcula sobre 320 × 320 px. Para un contorno adaptable usa porcentajes; no se mezclan unidades dentro del mismo polígono.
- No importa CSS arbitrario
- El recorte CSS con polygon se crea aquí desde controles. No se analizan expresiones path(), shape(), calc() ni referencias SVG; el código mostrado es de solo lectura.
- No cambia el espacio del elemento
- clip-path modifica lo visible, pero la caja sigue ocupando el mismo lugar. El box-shadow propio también puede quedar recortado.
- Solo produce CSS
- No hay carga de imágenes, PNG o SVG recortado ni animaciones hover. Interpolar polígonos exige igual número de puntos en ambos extremos.
Preguntas sobre el Generador de Clip-Path CSS
¿Cómo agrego o elimino puntos de un polígono clip-path?
Haz clic en la marca de un borde o en Añadir punto; para quitar uno, selecciónalo y confirma la vista previa. Deben quedar al menos tres puntos.
¿clip-path afecta el tamaño del elemento en el diseño?
No. El recorte altera la pintura visible, pero la caja original conserva su tamaño y su posición en el diseño.
¿Por qué no se ve el box-shadow en mi forma recortada?
El clip también corta la sombra pintada por el mismo elemento. Pon el box-shadow en un contenedor exterior si quieres conservarlo.
¿Puedo animar una forma clip-path?
CSS permite transiciones entre polígonos compatibles, pero aquí se exporta una sola forma estática. Para animar, ambos extremos necesitan la misma cantidad de vértices.
¿Qué diferencia hay entre clip-path y border-radius?
border-radius redondea la caja rectangular; clip-path define otra zona visible. polygon() conecta sus vértices con líneas rectas.
¿Encontraste un problema con la forma o las coordenadas?
Prueba el Generador de Clip-Path CSS
Elige una forma, mueve los puntos y comprueba que el código corresponde al recorte visible.
Guarda este Generador de Clip-Path CSS para el próximo borde oblicuo o diseño geométrico.
Se genera en el navegador.