Genera formas poligonales con CSS clip-path mediante nodos interactivos. Copia reglas CSS compatibles, máscaras SVG y coordenadas en porcentajes responsivos.
-webkit-clip-path: polygon(
0.0% 0.0%,
100.0% 0.0%,
100.0% 85.0%,
0.0% 100.0%
);
clip-path: polygon(
0.0% 0.0%,
100.0% 0.0%,
100.0% 85.0%,
0.0% 100.0%
);Genera formas poligonales personalizadas con CSS clip-path mediante controladores interactivos. Copia reglas CSS compatibles, trazados SVG y coordenadas porcentuales adaptativas.
Notación funcional estándar de la especificación W3C CSS Shapes Module Level 1. Admite una regla de relleno opcional ('nonzero' o 'evenodd') seguida de pares de coordenadas separados por comas. Cada par se define mediante valores de longitud o porcentaje (X Y) separados por un espacio.
Determina cómo se procesan las trayectorias poligonales que se autointersecan y los recortes interiores anidados. 'nonzero' rellena todos los bucles vectoriales cerrados; 'evenodd' alterna el estado de relleno en cada intersección de rayo, permitiendo crear huecos geométricos tipo dónut y máscaras de marcos vaciados.
Define el cuadro delimitador que sirve de anclaje para el cálculo de porcentajes. Las opciones incluyen 'border-box' (incluye bordes), 'padding-box' (excluye bordes), 'content-box', o los valores SVG 'fill-box'/'stroke-box'/'view-box'. Por defecto es 'border-box' en elementos HTML.
Para definiciones dentro de <clipPath> en SVG. 'objectBoundingBox' normaliza las coordenadas como fracciones decimales entre 0.0 y 1.0 relativas al cuadro delimitador del elemento destino; 'userSpaceOnUse' bloquea las coordenadas al sistema de coordenadas absoluto del lienzo SVG.
Indica al motor de renderizado del navegador que promueva el elemento recortado a su propia capa de composición de GPU antes de iniciar la animación, evitando ciclos de repintado en la CPU y manteniendo 60/120 FPS estables durante las transformaciones de forma en keyframes.
Las transiciones CSS y las reglas @keyframes aplicadas a clip-path solo interpolan suavemente cuando el estado inicial y el final del polígono contienen exactamente la misma cantidad de vértices en el mismo orden de índices. Si un triángulo de 3 puntos se transforma en un octógono de 8 puntos, el motor no puede interpolar la geometría y da un salto brusco al 50%. Solución: inserta puntos colineales ficticios a lo largo de las aristas del triángulo para que ambas formas declaren exactamente 8 vértices.
Para crear una ventana hueca, un anillo tipo dónut o un marco fotográfico vaciado dentro de un único polígono CSS, declara 'polygon(evenodd, ...)'. Traza el contorno exterior en sentido horario (de 0% 0% a 100% 100%), luego genera un puente hacia el interior y traza la ventana interna en sentido antihorario. El algoritmo de trazado de rayos 'evenodd' resta la isla interior, generando un centro transparente.
A diferencia de 'opacity: 0' o 'border-radius', que siguen capturando clics en las esquinas transparentes del rectángulo, 'clip-path' restringe estrictamente los eventos de puntero del usuario (clic, hover, toque táctil) al interior visible del polígono. Los clics fuera del polígono recortado atraviesan limpiamente hacia los elementos DOM inferiores sin requerir 'pointer-events: none'.
Al colocar elementos adyacentes recortados con polígonos (como secciones hero diagonales en pantalla dividida), el antialiasing de la GPU puede generar una fina línea de fondo de 1 píxel que parpadea entre las formas. Neutraliza este efecto añadiendo una superposición microscópica del 0.2% a las coordenadas de la arista compartida o aplicando 'outline: 1px solid transparent' para forzar un suavizado homogéneo en la GPU.
Verifica el número de vértices en ambos fotogramas clave de la animación CSS. La interpolación de polígonos en CSS exige estrictamente un número idéntico de pares de coordenadas. Utiliza el normalizador de vértices de este generador para añadir puntos de anclaje colineales a la forma más simple, de modo que ambos estados compartan la misma longitud de vértices.
La propiedad 'clip-path' recorta todo el renderizado de los descendientes y las sombras exteriores a su contorno, además de crear un contexto de apilamiento local. Mueve las sombras a un contenedor padre utilizando 'filter: drop-shadow(...)', y renderiza tooltips o ventanas emergentes mediante un React Portal insertado directamente en el body del documento.
WebKit exige el prefijo de proveedor en versiones antiguas de iOS y macOS (Safari 13 y anteriores). Incluye siempre '-webkit-clip-path: polygon(...)' inmediatamente antes de la propiedad estándar sin prefijo 'clip-path' en tu hoja de estilos CSS.
Cuando las aristas del polígono se cruzan entre sí, la regla de relleno por defecto evalúa los números de devanado y puede invertir las regiones interiores. Desenreda los controles de los vértices cruzados en el lienzo interactivo o cambia el parámetro fill-rule a 'nonzero' para rellenar todos los contornos vectoriales superpuestos.
Un polígono con CSS clip-path se define mediante la sintaxis 'clip-path: polygon(x1 y1, x2 y2, ...)', donde cada vértice se determina por coordenadas horizontales (X) y verticales (Y) separadas por un espacio, y cada par de vértices se separa por una coma. Las coordenadas se expresan habitualmente en porcentajes relativos al cuadro delimitador del elemento (desde 0% 0% en la esquina superior izquierda hasta 100% 100% en la inferior derecha). Los navegadores modernos admiten unidades porcentuales y píxeles directos con aceleración por hardware de la GPU.
Sí, los polígonos con CSS clip-path se pueden animar fluidamente mediante transiciones estándar como 'transition: clip-path 0.4s ease' o animaciones '@keyframes', siempre que los estados inicial y final tengan exactamente el mismo número de vértices. Si la cantidad de vértices varía, los motores de navegación no pueden calcular la interpolación de coordenadas y saltan bruscamente de una forma a otra. Es posible transformar cualquier forma rellenando la figura más simple con puntos colineales ficticios que igualen el conteo de la figura de destino.
CSS 'clip-path: polygon()' es ligero, se define directamente en CSS puro sin requerir marcado HTML y soporta porcentajes adaptativos de forma nativa, aunque está limitado a vértices de líneas rectas. Por el contrario, '<clipPath>' en SVG soporta curvas Bézier cuadráticas y cúbicas suaves (<path>), primitivas geométricas como círculos y elipses, y máscaras de texto, pero requiere declarar un elemento SVG en el DOM y vincularlo mediante 'clip-path: url(#id)'. Para siluetas geométricas de bordes rectos, el polígono CSS ofrece un rendimiento de renderizado notablemente superior y cero sobrecarga en el DOM.
Según la especificación del W3C, CSS 'clip-path' recorta el área de detección de eventos táctiles y de puntero junto con la capa visual. Las zonas fuera del contorno poligonal no capturan clics, hovers ni eventos de cursor, permitiendo interactuar con los elementos del DOM situados debajo con total naturalidad. Si los clics quedan bloqueados, verifica que ningún contenedor padre sin recortar esté interceptando los eventos o que un pseudoelemento (::before o ::after) sin recortar no esté superpuesto sobre la página.
Extraiga al instante paletas de color a partir de imágenes. Genere muestras dominantes en HEX, RGB y HSL, exporte tokens para CSS o Tailwind y verifique el contraste de accesibilidad WCAG.
Calcula dimensiones de proporción áurea y rectángulos dorados al instante. Divide longitudes según phi (1,618), escala tipografía y crea cuadrículas responsivas.
Genera sombras CSS neumórficas y Soft UI con superficies extruidas, hundidas, planas y cóncavas. Copia código limpio en CSS, Tailwind o SCSS al instante.
Genera esquemas armónicos de color al instante. Crea paletas complementarias, análogas, triádicas y adyacentes con verificación de contraste WCAG en tiempo real y exportación CSS.
Genera código CSS moderno de glassmorphism y vidrio esmerilado con controles interactivos de desenfoque backdrop-filter, opacidad, bordes y sombras. Copia HTML y CSS limpios al instante.
Comprime imágenes online sin pérdida de calidad. Reduce el tamaño de JPG, PNG y WebP en tu navegador sin subir datos al servidor, con objetivo en KB y exportación en ZIP.