Crie formas e polígonos CSS clip-path personalizados com controles interativos. Copie regras CSS compatíveis, código SVG e coordenadas responsivas em porcentagem.
-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%
);Crie formas e polígonos CSS clip-path personalizados com pontos de arrasto interativos. Copie regras CSS cross-browser, código SVG e coordenadas responsivas em porcentagem.
Notação funcional da especificação W3C CSS Shapes Module Level 1. Recebe uma regra de preenchimento opcional ('nonzero' ou 'evenodd') seguida por pares de coordenadas separados por vírgula. Cada par consiste em dois valores de comprimento ou porcentagem separados por espaço (X Y).
Determina como interseções de arestas e vazados internos no polígono são calculados. 'nonzero' preenche todos os contornos vetoriais fechados; 'evenodd' alterna o estado de preenchimento a cada cruzamento de vetor, permitindo criar vazados centrais, furos geométricos e molduras vazadas.
Define a caixa delimitadora de coordenadas para o cálculo percentual. As opções incluem 'border-box' (inclui bordas), 'padding-box' (exclui bordas), 'content-box', ou referências SVG como 'fill-box', 'stroke-box' e 'view-box'. O padrão para elementos HTML é 'border-box'.
Utilizado em definições <clipPath> no SVG. 'objectBoundingBox' normaliza as coordenadas em frações relativas entre 0.0 e 1.0 em relação à caixa do elemento-alvo; 'userSpaceOnUse' trava as coordenadas na escala absoluta do sistema de coordenadas do canvas SVG.
Instrui o motor de renderização do navegador a promover o elemento recortado a uma camada independente de composição na GPU antes do início de animações, evitando ciclos custosos de repintura (paint) na CPU e sustentando 60/120 FPS estáveis durante transições de keyframes.
Transições CSS e animações com @keyframes na propriedade clip-path só interpolam suavemente se os estados inicial e final do polígono contiverem rigorosamente a mesma quantidade de vértices e na mesma ordem de índice. Se um triângulo de 3 vértices tentar se transformar em um octógono de 8 vértices, o navegador não consegue interpolar a geometria e salta abruptamente aos 50%. Solução: insira pontos fictícios colineares nas arestas do triângulo para que ambas as formas declarem exatamente 8 vértices.
Para produzir uma janela oca, formato de anel ou moldura fotográfica vazada em um único polígono CSS, declare 'polygon(evenodd, ...)'. Trace o contorno externo no sentido horário (de 0% 0% a 100% 100%), crie uma linha de transição até a parte interna e desenhe a janela vazada no sentido anti-horário. O algoritmo de traçado de raio (ray-casting) do 'evenodd' subtrai a ilha interior, gerando um centro perfeitamente transparente.
Diferente de 'opacity: 0' ou 'border-radius' (que continuam capturando cliques em cantos retangulares invisíveis), a propriedade 'clip-path' restringe eventos de ponteiro (clique, hover, toque) exclusivamente à área visível do polígono. Cliques fora do perímetro recortado atravessam diretamente para os elementos inferiores do DOM, sem a necessidade de recorrer a 'pointer-events: none'.
Ao alinhar elementos recortados adjacentes (como seções hero diagonais divididas ao meio), a rasterização com suavização de serrilhado (antialiasing) na GPU pode gerar uma fresta oscilante de 1 pixel no fundo entre as formas. Neutralize essa fenda adicionando uma sobreposição microscópica de 0,2% às coordenadas da aresta compartilhada ou aplicando 'outline: 1px solid transparent' para forçar a mesclagem suave das bordas na GPU.
Verifique o número de vértices em ambos os keyframes da animação CSS. A interpolação de polígonos em CSS exige quantidades rigorosamente idênticas de pares de coordenadas. Utilize o recurso 'Normalizador de Vértices' deste gerador para inserir pontos colineares na forma mais simples, igualando a contagem de nós entre ambos os estados.
A propriedade 'clip-path' recorta qualquer renderização descendente e sombras fora de seu perímetro geométrico, criando um contexto de empilhamento local. Mova o efeito de sombra para um contêiner pai utilizando 'filter: drop-shadow(...)', e renderize popovers ou tooltips por meio de um React Portal anexado diretamente ao corpo (body) do documento.
O motor WebKit requer o prefixo de fornecedor em versões legadas do iOS e macOS (Safari 13 e anteriores). Adicione sempre '-webkit-clip-path: polygon(...)' imediatamente antes da propriedade padrão 'clip-path' na sua folha de estilos CSS.
Quando as arestas do polígono se cruzam, a regra de preenchimento padrão calcula os números de enrolamento (winding numbers), o que pode inverter áreas fechadas. Desembarace os nós cruzados no canvas interativo ou mude a regra de preenchimento para 'nonzero' para forçar o preenchimento de todos os contornos vetoriais sobrepostos.
Um polígono em CSS clip-path é criado com a sintaxe 'clip-path: polygon(x1 y1, x2 y2, ...)', em que cada vértice é delimitado por coordenadas horizontal (X) e vertical (Y) separadas por espaço, e cada par de vértices é separado por vírgula. As coordenadas são comumente declaradas em porcentagens relativas à caixa do elemento (variando de 0% 0% no canto superior esquerdo a 100% 100% no canto inferior direito). Navegadores modernos suportam unidades em porcentagem e pixels diretamente, com aceleração via hardware na GPU.
Sim, formas em CSS clip-path podem ser totalmente animadas usando regras convencionais como 'transition: clip-path 0.4s ease' ou animações com '@keyframes', desde que os estados inicial e final possuam rigorosamente a mesma quantidade de vértices. Se as contagens forem divergentes, os navegadores não conseguem interpolar as coordenadas e saltarão abruptamente de uma forma para a outra. É possível realizar o morphing de qualquer forma preenchendo a geometria mais simples com vértices neutros colineares até igualar a contagem do formato final.
O 'clip-path: polygon()' do CSS é ultraleve, declarado diretamente no CSS sem poluição do HTML e oferece suporte nativo a porcentagens responsivas, porém se restringe a arestas retas. Já o '<clipPath>' do SVG permite curvas de Bézier suaves cúbicas e quadráticas (<path>), primitivas geométricas como círculos e elipses e máscaras de texto, mas exige a inclusão de um elemento SVG no DOM e sua vinculação via 'clip-path: url(#id)'. Para geometrias de arestas retas, o polígono CSS proporciona renderização consideravelmente mais rápida e sem sobrecarga no DOM.
De acordo com a especificação da W3C, a propriedade 'clip-path' recorta a área de teste de clique (hit-testing) em conjunto com a pintura visual do elemento. Áreas externas ao perímetro do polígono não interceptam cliques, eventos de cursor ou foco, permitindo que elementos subjacentes da página sejam clicados com total fluidez. Se os cliques estiverem sendo bloqueados, certifique-se de que nenhum contêiner pai sem recorte esteja capturando os eventos de ponteiro ou que pseudo-elementos (::before/::after) não recortados estejam sobrepostos.
Extraia paletas de cores de imagens instantaneamente. Gere amostras dominantes em HEX, RGB e HSL, exporte tokens CSS e Tailwind e teste o contraste de acessibilidade WCAG.
Calcule dimensões na proporção áurea e retângulos dourados instantaneamente. Divida comprimentos por phi (1,618), dimensione escalas tipográficas e gere grids responsivos para layouts.
Crie sombras suaves em relevo, rebaixadas e planas com nosso Gerador de Neumorfismo CSS. Copie código limpo e ajuste ângulo, desfoque e contraste em tempo real.
Gere esquemas e harmonias de paletas de cores instantaneamente. Crie paletas complementares, análogas, triádicas e meio-complementares com verificação de contraste WCAG em tempo real e exportação CSS.
Gere código CSS moderno de glassmorphism e vidro fosco com ajustes em tempo real de desfoque backdrop-filter, opacidade, borda e sombra. Copie HTML e CSS limpos.
Comprima imagens online sem perda de qualidade. Reduza tamanhos de JPG, PNG e WebP direto no navegador, sem upload para servidores, com ajuste exato de KB e exportação em lote ZIP.