Exemplos de CSS clip-path em layouts reais

Escolha o preset hexágono, mude para a saída de declaração e copie a regra clip-path para sua própria classe de imagem quadrada. Defina largura e altura iguais com object-fit: cover; o CSS completo de exemplo usa uma caixa demonstrativa 4:3 e não deve ser colado sem ajustes no avatar. Verifique o rosto perto de cada borda; mudar o polígono não move a pessoa na foto.

Aplique o exemplo de chevron numa imagem decorativa ao lado de uma chamada para ação. Compare as mesmas coordenadas percentuais numa caixa quadrada e numa caixa larga: elas escalam em cada eixo, então o ângulo e a silhueta podem mudar. Verifique também um layout móvel estreito, além do desktop. Mantenha o texto essencial e o link real fora do elemento decorativo recortado.

Experimente o paralelogramo numa camada decorativa atrás de um cartão. Evite aplicá-lo ao contêiner de conteúdo inteiro se isso cortar títulos, contornos de foco ou botões. Uma prévia de forma não comprova acessibilidade por teclado. Navegue pelo componente pronto com Tab e confira se o controle em foco permanece visível nas duas larguras.

Comece pelo hexágono e defina o primeiro ponto como X 30%, Y 0%. Adicione um ponto após o selecionado ou remova um, mantendo de 3 a 32 pontos. Arraste, digite coordenadas de 0 a 100% ou use as setas (1%; com Shift, 10%). Copie apenas a declaração clip-path para preservar seu layout; o CSS completo inclui estilos de demonstração. Compare caixas quadradas e largas no computador e no celular. Mantenha texto e contornos de foco fora do recorte e uma alternativa retangular. Importar CSS e editar circle, ellipse ou inset não são suportados.

O Toolars mantém este guia e a ferramenta vinculada. Informe diferenças entre as instruções e o resultado atual para que ambos possam ser revisados juntos.

O exemplo para download abaixo é uma entrada de teste sintética, não um caso de cliente. Mantenha a mesma entrada e as mesmas configurações ao reproduzi-lo; confira o arquivo baixado conforme os critérios indicados, não apenas a prévia.

As verificações cobrem apenas este exemplo, não todos os arquivos, navegadores ou aplicativos de destino. Repita após mudanças na ferramenta e confira sua saída antes de compartilhar.

Amostras sintéticas do Toolars · atualizadas em 2026-09-13. Elas demonstram o fluxo de trabalho, não a qualidade de fotos ou digitalizações reais nem a aceitação de uma plataforma.

A amostra CSS usa a predefinição hexágono. No CSS clip-path, escolha hexágono, defina o ponto horizontal como 24 e o ponto vertical como 50. Compare as duas declarações clip-path do download com a amostra; cor e espaçamento podem diferir. Teste elementos largos e estreitos: as porcentagens seguem a caixa do elemento. O recorte por si só não faz o texto ao redor contornar a forma.

Baixar amostra de entrada