ZenovayTools

Generador de CSS Clip Path

Genera formas de CSS clip-path de forma interactiva: polígono, círculo y elipse. Arrastra vértices, elige presets como flecha o estrella, y copia el valor de clip-path CSS.

Presets

Preview (drag points)

BG:

Vertices (3)

1
x
y
2
x
y
3
x
y

CSS Output

clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

Cómo usar Generador de CSS Clip Path

  1. 1Elige un tipo de clip-path: polígono, círculo o elipse.
  2. 2Selecciona una forma preestablecida o arrastra los puntos de control para crear una forma personalizada.
  3. 3Copia el valor del clip-path CSS para usarlo en tu hoja de estilos.
ZenovayAnalytics

Descubre qué hacen de verdad tus visitantes.

  • Seguimiento de visitantes en tiempo real
  • Privacidad primero, sin aviso de cookies
  • Configurado en dos minutos
Descubre Zenovay

Herramientas relacionadas

Generador de Degradados CSS
Crea hermosos degradados CSS con un editor visual. Degradados lineales, radiales y cónicos.
Generador de Sombra de Caja CSS
Diseña sombras de caja CSS con controles visuales. Ajusta desplazamiento, desenfoque, expansión y color.
Generador de Borde Redondeado CSS
Crea valores de borde redondeado personalizados con controles visuales. Vincula o desvincula las esquinas para ajustes rápidos.
Área de Juego CSS Flexbox
Aprende y genera diseños CSS Flexbox visualmente. Ajusta dirección, alineación, envoltura y espaciado en tiempo real.

Preguntas frecuentes

¿Qué es CSS clip-path?▾
clip-path recorta un elemento a una forma específica. Todo lo que queda fuera de la forma se oculta. Valores admitidos: polygon(x1 y1, x2 y2, ...): polígono personalizado con vértices como porcentajes. circle(radio at cx cy): círculo. ellipse(rx ry at cx cy): elipse. inset(arriba derecha abajo izquierda round radio): rectángulo insertado. path("ruta SVG"): ruta SVG. Ejemplo: clip-path: polygon(50% 0%, 0% 100%, 100% 100%) crea un triángulo. Compatibilidad con navegadores: todos los navegadores modernos. Use el prefijo -webkit-clip-path para Safari < 14.
¿Cuáles son los patrones de formas clip-path más comunes?▾
Triángulo hacia arriba: polygon(50% 0%, 0% 100%, 100% 100%). Triángulo hacia abajo: polygon(0% 0%, 100% 0%, 50% 100%). Hexágono: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%). Flecha hacia la derecha: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%). Estrella: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%). Pentágono: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%).
¿Cómo interactúa clip-path con border-radius?▾
clip-path anula border-radius visualmente — border-radius aún existe en el modelo de caja pero clip-path oculta las esquinas. Si desea formas redondeadas, use: inset(0 round 10px) para un rectángulo redondeado. circle() y ellipse() son inherentemente suaves. Para polígonos redondeados, use la función de forma básica polygon() de CSS combinada con la próxima propiedad corner-shape (aún experimental). Una solución alternativa: aplique border-radius a un elemento hijo dentro del contenedor recortado.
¿Puedo animar CSS clip-path?▾
¡Sí! clip-path admite transiciones y animaciones CSS entre formas con el mismo número de puntos. Ejemplo: element { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); transition: clip-path 0.5s ease; } element:hover { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } Ambas formas deben tener el mismo número de vértices de polígono para una interpolación suave. Consejo: añada vértices de punto medio adicionales a ambas formas para habilitar la interpolación entre polígonos de formas diferentes.
¿Cuál es la diferencia entre clip-path y mask?▾
clip-path: usa una forma geométrica (polígono, círculo, ruta SVG). El área recortada está completamente oculta. Bordes nítidos. Alto rendimiento (acelerado por GPU). mask: usa una imagen o degradado. Blanco = visible, negro = oculto, gris = semitransparente. Permite bordes suaves, degradados y máscaras complejas. mask-image: linear-gradient(to right, transparent, black) crea un efecto de desvanecimiento. Use clip-path para formas geométricas duras (secciones diagonales, triángulos, hexágonos). Use mask para efectos suaves, desvanecimientos y máscaras basadas en imágenes.