Creador CSS Clip-path

Creador CSS Clip-path - Generador Visual de Formas

Crea formas CSS clip-path complejas visualmente. Esta herramienta soporta poligono, circulo, elipse e inset con una interfaz intuitiva de arrastrar y soltar para puntos de poligono.

Que es CSS clip-path?

CSS clip-path es una propiedad que crea una region de recorte para definir que partes de un elemento son visibles. Las partes fuera de la region de recorte se ocultan.

Tipos de forma:

polygon() - Formas personalizadas con multiples puntos
circle() - Recorte circular
ellipse() - Recorte oval
inset() - Rectangular con esquinas redondeadas opcionales

Como creo un clip-path de poligono?

El clip-path de poligono usa puntos de coordenadas:

Sintaxis: polygon(x1% y1%, x2% y2%, ...)

Cada punto se define por porcentajes X e Y:
- 0% 0% = esquina superior izquierda
- 100% 0% = esquina superior derecha
- 100% 100% = esquina inferior derecha
- 0% 100% = esquina inferior izquierda
- 50% 0% = centro superior

Como funcionan circulo y elipse?

Sintaxis de circulo:
circle(radio at centroX centroY)

Ejemplo: circle(50% at 50% 50%)
- Crea un circulo con radio 50%
- Centrado en 50% 50% (medio)

Sintaxis de elipse:
ellipse(radioX radioY at centroX centroY)

Ejemplo: ellipse(50% 30% at 50% 50%)
- Crea una forma oval
- 50% ancho, 30% alto

Que es inset clip-path?

Inset crea un recorte rectangular con esquinas redondeadas opcionales:

Sintaxis: inset(arriba derecha abajo izquierda round radio)

Los valores representan inset desde cada borde:
- inset(10%) - 10% desde todos los lados
- inset(10% 20%) - 10% arriba/abajo, 20% izquierda/derecha

Caracteristicas principales

• 4 tipos de forma: poligono, circulo, elipse, inset
• Edicion visual de puntos arrastrables
• 12 formas de poligono predefinidas
• Agregar y eliminar puntos de poligono
• Entrada numerica precisa para todos los valores
• Vista previa en vivo
• Controles de radio y posicion del circulo
• Elipse con radios X/Y independientes
• Inset con soporte de radio de borde
• Copiar codigo CSS al portapapeles
• Amigable con dispositivos tactiles
• Procesamiento 100% del lado del cliente
• Soporte de modo oscuro
• Interfaz responsiva