Generador de clip-path CSS
Crea formas clip-path de CSS: polígonos con puntos arrastrables y predefinidos, círculo, elipse e inset con esquinas redondeadas. Vista previa en vivo y código.
Forma
Ajustes de la forma
Arrastra los controles en la vista previa o escribe valores exactos.
Vista previa
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
Herramientas Relacionadas
Ver Todas¿Qué es Generador de clip-path?
Dibuja formas clip-path de forma visual. Los polígonos se pueden editar arrastrando puntos en la vista previa o escribiendo porcentajes exactos, con formas predefinidas desde triángulos hasta estrellas y bocadillos; las formas círculo, elipse e inset se ajustan con deslizadores.
Cómo usar Generador de clip-path
- Elige una Forma: Polígono, Círculo, Elipse o Inset.
- En los polígonos, elige una forma predefinida y arrastra los controles o escribe el porcentaje X/Y de cada punto; usa Añadir punto / Quitar punto.
- En círculo y elipse ajusta el radio y el centro; en inset ajusta Arriba, Derecha, Abajo, Izquierda y un Radio de las esquinas opcional.
- Activa Mostrar la zona recortada para ver lo que se corta.
- Copia el código CSS.
Ejemplo
Forma predefinida Hexágono con el punto 1 movido a X 20 %
clip-path: polygon(20% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
Cuándo usar Generador de clip-path
Usa clip-path para formas decorativas de imágenes, bordes de sección inclinados, avatares hexagonales y animaciones de revelado (clip-path se puede animar entre formas con el mismo número de puntos). El contenido fuera de la forma se oculta y no recibe clics. Para rectángulos redondeados prefiere border-radius; para formas alrededor de las que debe fluir el texto usa shape-outside.
Cómo funciona Generador de clip-path
Las coordenadas son porcentajes de la caja de borde del elemento, medidos desde la esquina superior izquierda. Los polígonos se escriben como polygon(x% y%, …) en el orden de los puntos, los círculos como circle(r% at x% y%), las elipses como ellipse(rx% ry% at x% y%) y los inset como inset(top right bottom left round r), con los cuatro desplazamientos acortados como en la forma abreviada de margin. Añadir punto inserta un punto nuevo a medio camino entre el punto seleccionado y el siguiente.
Casos de Uso Comunes
- Avatares hexagonales o en forma de estrella
- Bordes inclinados en secciones de cabecera
- Indicadores de pasos con flechas y cheurones
- Tarjetas en forma de bocadillo
- Animaciones hover que transforman la forma
Preguntas Frecuentes
¿Necesito -webkit-clip-path?
No para formas básicas en los navegadores actuales; Safari admite la propiedad sin prefijo desde la versión 13.1.
¿Puedo animar clip-path?
Sí, con una transición o keyframes, siempre que ambas formas sean del mismo tipo y los polígonos tengan el mismo número de puntos.
¿Por qué no puedo hacer clic en la parte oculta de mi elemento?
clip-path también recorta la detección de clics: las zonas fuera de la forma no se pueden pulsar.