clip-path com polygon() e circle()

clip-path recorta a área visível de um elemento em uma forma especificada. Tudo que estiver fora da forma fica invisível, mas continua ocupando espaço no layout.

Recorte um elemento em uma forma circular. O argumento é o raio:

Recorte o elemento em uma elipse especificando o raio no eixo x, o raio no eixo y e uma posição central opcional:

É a forma mais poderosa de clip-path. Defina um polígono listando pares de coordenadas x,y:

Recorte o elemento em um retângulo com cantos arredondados opcionais. Os argumentos são distâncias de recuo:

Crie transições angulares entre as seções da página:

Um clip-path com a mesma quantidade de pontos pode ser interpolado para criar animações de revelação e transformação:

Para formas arredondadas simples, border-radius é melhor: ele funciona com plano de fundo e borda. Utilize clip-path quando precisar de formas não retangulares que border-radius não consegue criar.

path() aceita uma sequência de caminho SVG para criar formas arbitrárias:

clip-path cria um novo contexto de empilhamento e pode acionar uma nova pintura a cada quadro quando é animado. Animar clip-path é mais dispendioso do que utilizar transformação ou opacidade; combine essas técnicas com cuidado.

O sistema de coordenadas de clip-path é a caixa de borda do elemento (ou a caixa de margem para SVG). As porcentagens são relativas às dimensões do elemento.

Qual função de clip-path cria uma forma irregular e não retangular definida por pares de coordenadas?

clip-path recorta elementos em formas geométricas. circle() e ellipse() criam recortes arredondados. polygon() define qualquer forma com vários vértices. inset() recorta o elemento em um retângulo com arredondamento opcional. Anime a transição entre formas poligonais com a mesma quantidade de pontos para criar revelações impactantes. Utilize path() para criar formas arbitrárias baseadas em SVG.