Generador de Clip Path CSS

La propiedad CSS clip-path te permite definir una región de recorte para un elemento: solo la parte dentro de la región es visible, y todo lo que está fuera queda oculto. Admite formas como polygon(), circle(), ellipse() y path(), permitiéndote crear elementos no rectangulares, divisores diagonales, máscaras de imagen geométricas y mucho más.

Cuando se selecciona el tipo de forma Polígono, aparecen manejadores circulares azules en el lienzo de vista previa en cada vértice del polígono. Haz clic y arrastra cualquier manejador para reposicionarlo. La salida CSS se actualiza instantáneamente mientras arrastras.

Las coordenadas del polígono clip-path se expresan como porcentajes del ancho y alto del elemento. 0% 0% es la esquina superior izquierda, 100% 0% es la superior derecha, 100% 100% es la inferior derecha, y 0% 100% es la inferior izquierda.

Usa el botón "+ Agregar Punto" para añadir un nuevo punto de control en 50% 50% (centro), luego arrástralo o edita sus valores X/Y. Para eliminar un punto, haz clic en "− Eliminar" junto a él. Un polígono requiere al menos 3 puntos.

La herramienta incluye 12 preajustes de polígono: Triángulo, Diamante, Flecha Derecha, Flecha Izquierda, Pentágono, Hexágono, Estrella, Chevron, Inclinación Izquierda, Inclinación Derecha, Biselado y Rebaje. Al aplicar un preajuste se cargan sus puntos de control, que puedes personalizar.

Al seleccionar el tipo de forma Círculo se genera un valor clip-path: circle(r% at cx% cy%). El control deslizante de Radio controla el tamaño del círculo como porcentaje del cuadro de referencia del elemento.

Un clip-path de círculo toma un solo radio, produciendo una forma de recorte perfectamente redonda. Un clip-path de elipse toma valores separados de radio X (rx) y radio Y (ry), permitiéndote crear formas ovaladas.

Hay dos botones de copia en la sección de Salida CSS. "Copiar CSS" copia la regla CSS completa incluyendo el selector .element. "Copiar Valor" copia solo el valor clip-path para pegarlo en una regla existente.

CSS clip-path con formas básicas (polygon, circle, ellipse) está bien soportado en todos los navegadores modernos incluyendo Chrome, Firefox, Safari y Edge. La propiedad no requiere prefijos de proveedor para formas básicas.

¡Sí! CSS clip-path puede transicionarse y animarse suavemente entre formas del mismo tipo con el mismo número de puntos. Por ejemplo: "transition: clip-path 0.4s ease".

Aplica un clip-path de polígono a un elemento de sección de ancho completo para crear transiciones diagonales, chevron o en forma de ola entre secciones de la página. Usa los preajustes Inclinación Izquierda o Derecha como punto de partida.

Cuando cambias el Fondo de Vista Previa a "Imagen", la vista previa se llena con un degradado (índigo a rosa) en lugar de un color plano. Esto te ayuda a ver cómo quedaría el clip-path aplicado a una foto o fondo rico.