Gerador de clip-path

O que faz o clip-path

O clip-path recorta um elemento com uma forma: o que fica de fora não é pintado nem recebe cliques. Funciona com qualquer elemento, não só com imagens, e não altera o espaço que ocupa na página, por isso o resto da maquete não se mexe. É a forma moderna de fazer avatares hexagonais, cabeçalhos com a margem inclinada ou cartões em forma de balão de fala sem exportar nenhuma imagem.

As quatro formas básicas

• circle(50% at 50% 50%): raio e centro. Com um raio de 50 % numa imagem quadrada obtém-se um círculo perfeito.
• ellipse(50% 35% at 50% 50%): dois raios, horizontal e vertical.
• inset(10% round 8%): um retângulo recuado a partir de cada lado, com cantos arredondados opcionais. Útil para cortar margens sem mexer na imagem.
• polygon(…): uma lista de pontos x y. Com percentagens, a forma adapta-se a qualquer tamanho.

Animar um clip-path

Dois polígonos com o mesmo número de pontos podem ser animados com transition: o navegador desloca cada ponto até ao seu par. Por isso os efeitos de «revelar» costumam partir de um polígono com todos os pontos juntos numa linha. Se o número de pontos não coincidir, a mudança é instantânea.

Conselhos

• As sombras com box-shadow também são recortadas. Para uma sombra com a forma, use filter: drop-shadow() num elemento pai.
• Para formas com curvas, clip-path: path() aceita um traçado SVG, mas em píxeis fixos; as percentagens de polygon() são mais práticas em layouts fluidos.
• A fotografia de exemplo vem de /random, o banco de fotografias do gerador ximg.es, com uma semente fixa para ser sempre a mesma: https://ximg.es/random/960x640.jpg?seed=ximg-clip.