Como gerar formas CSS clip-path com tamanho e posição

Q: Posso usar o gerador sem preencher todos os campos?

Sim, se deixar a forma vazia, o gerador usa circle . O tamanho inicial é 50 e a posição inicial é center , podendo alterar estes valores antes de obter o trecho CSS.

Q: Como funcionam o tamanho e a posição numa forma circular?

Para circle , o tamanho fornecido é usado como percentagem e a posição é colocada depois de at . Para ellipse , o primeiro valor usa esse tamanho e o segundo corresponde a 60% dele, mantendo a posição indicada.

Q: O tamanho altera todas as formas disponíveis?

Não. triangle , hexagon , pentagon , star e diamond usam modelos polygon com coordenadas percentuais fixas. O tamanho e a posição não alteram esses pontos.

Escolha uma forma, ajuste o tamanho e a posição quando aplicável e obtenha um trecho CSS com clip-path. Círculos e elipses usam esses valores; as formas poligonais disponíveis seguem coordenadas fixas.

Para que serve o gerador de CSS clip-path

O CSS clip-path permite recortar visualmente um elemento através de uma forma. Esta ferramenta gera um trecho CSS com uma declaração clip-path, para que possa obter rapidamente uma base para máscaras circulares, elípticas ou poligonais sem escrever as coordenadas manualmente.

É útil quando precisa de preparar uma imagem, um cartão ou outro elemento com um contorno geométrico. Pode escolher uma forma com nome próprio e, nas formas circular e elíptica, ajustar o tamanho e a posição. Para as restantes formas disponíveis, a ferramenta aplica modelos poligonais com coordenadas percentuais predefinidas.

Como gerar o trecho CSS passo a passo

Abra o gerador e procure os controlos da forma, do tamanho e da posição. A forma é opcional: se não selecionar uma, o valor usado é circle. O tamanho também é opcional e começa em 50, enquanto a posição começa em center.
Escolha uma das formas reconhecidas: circle, ellipse, triangle, hexagon, pentagon, star ou diamond. Use circle quando quiser um recorte redondo e ellipse quando precisar de uma forma oval. As outras cinco opções recorrem a modelos baseados em polygon e mantêm coordenadas percentuais fixas.
Se estiver a trabalhar com um círculo, indique o tamanho e a posição pretendidos. O tamanho é usado como percentagem e a posição aparece depois de at na forma gerada. Por exemplo, um tamanho de 70 e a posição top left correspondem à lógica de um círculo de 70% colocado no canto superior esquerdo.
Para uma elipse, indique também o tamanho e a posição. O primeiro valor percentual usa o tamanho fornecido; o segundo usa esse tamanho multiplicado por 0,6. Assim, com tamanho 60 e posição top left, a forma resulta da combinação de 60% no primeiro eixo, 36% no segundo e dessa posição.
Reveja o trecho CSS produzido e copie a declaração clip-path para o selector do elemento que pretende recortar. Teste a composição no seu próprio layout, porque o efeito visual depende do elemento ao qual aplicar a declaração e do espaço que esse elemento ocupa.

Como interpretar o resultado e os seus limites

O resultado é um trecho CSS que contém uma declaração clip-path. Num círculo, leia o valor como uma percentagem de tamanho seguida da posição indicada. Numa elipse, o segundo tamanho não repete o primeiro: corresponde a 60% do valor fornecido. Esta diferença é importante quando compara o resultado com uma forma circular.

Nos modelos de triângulo, hexágono, pentágono, estrela e losango, o resultado usa coordenadas fixas baseadas em polygon. Alterar o tamanho ou a posição não transforma essas formas em versões escaladas com novos pontos, pelo que deve avaliar o recorte no elemento final.

Se deixar um campo opcional vazio, o gerador recorre ao valor predefinido correspondente. Se escrever um nome de forma que não esteja entre as opções reconhecidas, o valor usa a geometria de círculo; não é criado um desenho personalizado. Para obter um resultado previsível, selecione um nome suportado e confirme a declaração antes de a integrar.

Exemplo prático

Está a preparar uma imagem oval colocada no canto superior esquerdo de um cartão e quer verificar a estrutura do recorte antes de a aplicar.

Selecione ellipse, introduza 60 no tamanho e escolha top left na posição; depois consulte o trecho CSS gerado.

O resultado contém uma declaração clip-path para uma elipse com 60% no primeiro valor, 36% no segundo e a posição top left.

Limitações

Ajustes de tamanho e posição têm efeito descrito para círculos e elipses; triângulo, hexágono, pentágono, estrela e losango usam coordenadas poligonais fixas.

Erros comuns

Escrever um nome não reconhecido: esse valor usa a geometria de círculo. Corrija-o selecionando circle, ellipse, triangle, hexagon, pentagon, star ou diamond.

Perguntas frequentes

Posso usar o gerador sem preencher todos os campos?

Sim, se deixar a forma vazia, o gerador usa circle. O tamanho inicial é 50 e a posição inicial é center, podendo alterar estes valores antes de obter o trecho CSS.

Como funcionam o tamanho e a posição numa forma circular?

Para circle, o tamanho fornecido é usado como percentagem e a posição é colocada depois de at. Para ellipse, o primeiro valor usa esse tamanho e o segundo corresponde a 60% dele, mantendo a posição indicada.

O tamanho altera todas as formas disponíveis?

Não. triangle, hexagon, pentagon, star e diamond usam modelos polygon com coordenadas percentuais fixas. O tamanho e a posição não alteram esses pontos.