Use clip-path: shape() para recortar um fundo ou uma imagem com um contorno que acompanha o tamanho do componente. A função permite desenhar linhas e curvas com coordenadas em porcentagem, medidas fixas ou uma combinação das duas. No web design, isso ajuda a preservar a intenção visual de uma diagonal, uma curva ou um canto vazado quando a composição passa de uma faixa larga para uma coluna estreita.
Antes de desenhar, decida o que o recorte deve comunicar e quais partes da imagem precisam ficar visíveis. Uma silhueta pode fazer parte da identidade ou separar visualmente duas superfícies. Seu valor aparece quando essa relação continua legível em mais de um formato.
Qual problema visual a silhueta resolve?
Imagine a abertura de uma página para uma mostra de ilustração. O painel principal tem uma fotografia retangular e um bloco claro com título e data. Uma curva rasa na borda da fotografia pode aproximar visualmente as duas áreas e retomar um motivo dos cartazes. Em um telefone, a mesma curva pode ocupar espaço demais se invadir o rosto que fica perto do limite. O problema de projeto é definir quanto a silhueta pode avançar sem comprometer o conteúdo.
Coloque lado a lado a versão retangular, um corte diagonal e uma curva suave. Use a mesma foto, com o mesmo enquadramento, para que a comparação diga respeito à forma. Uma diagonal dá direção clara ao movimento do olhar. Uma curva pode criar continuidade com o bloco vizinho. Ao mostrar as três versões sem indicar qual tem CSS mais sofisticado, a equipe consegue avaliar se a forma pertence à composição ou parece aplicada de fora.
Como escolher entre porcentagens e medidas fixas?
Porcentagens no eixo horizontal acompanham a largura da caixa de referência. No eixo vertical, acompanham a altura. Uma entrada na borda a vinte por cento da largura se desloca de modo proporcional. Já uma entrada de vinte pixels preserva a mesma medida nominal em caixas diferentes. Misture as duas estratégias se a largura da curva deve acompanhar a imagem, mas sua profundidade precisa continuar discreta. Uma variável CSS pode concentrar essa profundidade em um único valor documentado.
Preste atenção ao formato da caixa. Uma curva definida por porcentagens pode parecer quase horizontal numa faixa panorâmica e bem mais inclinada num cartão alto. Faça o teste em três proporções e avalie o ângulo aparente. Se a ideia depende de uma inclinação constante, reavalie quais dimensões precisam ser limitadas. O guia do Chrome para recortes responsivos demonstra a mistura de coordenadas relativas e comprimentos. O MDN detalha os comandos de shape() e registra sua disponibilidade no Baseline de 2026.
Como desenhar o contorno e conferir a área segura?
Esboce o contorno em cima de um retângulo, marcando onde começa, onde muda de direção e onde fecha. Em CSS, from indica o início, line to cria um trecho reto e curve to cria uma curva guiada por um ou dois pontos de controle. Os pontos de controle orientam a direção da curva. Use close para tornar explícito onde o contorno se fecha. Comece com poucos pontos e ajuste a composição no navegador.
Marque uma área segura que fique dentro da interseção das regiões visíveis em todos os formatos previstos. Use-a para posicionar rostos, mãos ou objetos que dão sentido à foto. A composição interna pode mudar por meio de object-position ou de uma imagem própria para a largura. Isso resolve uma decisão diferente da forma da borda. Leia sobre direção de arte responsiva para imagens de capa se o enquadramento tiver de mudar de acordo com a tela.
Em qual elemento o recorte deve ficar?
Prefira aplicar a forma na camada visual. Em um cartão que contém uma imagem e um link, recorte a imagem ou um elemento interno que só contém a imagem. Mantenha título, ação, fundo funcional e contorno de foco fora dessa camada. clip-path restringe a região que é pintada e interfere na área que recebe eventos de ponteiro no conteúdo recortado. O espaço que o elemento ocupa no layout continua sendo calculado pela caixa normal.
Essa separação evita que uma mudança decorativa altere a geometria de uma ação. Se toda a capa clicável depende da forma da imagem, uma parte que parece botão pode ficar difícil de acionar depois de um ajuste. Percorra o cartão com teclado e toque perto das bordas aparentes. Compare a superfície ativa com o desenho percebido. O artigo sobre áreas de toque em interfaces aprofunda a diferença entre a figura e a região de interação.
Como manter uma versão básica utilizável?
Faça a imagem funcionar primeiro dentro de um retângulo com proporção definida e enquadramento adequado. Acrescente a forma onde houver suporte por meio de @supports ou de uma declaração que o navegador pode ignorar se não reconhecer. Uma forma de bordas retas também pode ser expressa com polygon(). Se essa for a expressão visual suficiente para a marca, use-a desde o início. Reserve a curva para quando sua continuidade fizer diferença na página.
Verifique a base com a forma desativada. A fotografia precisa continuar legível e o bloco ao lado deve manter contraste e espaçamento. Se a área de título depende de uma região vazia criada pela curva, a versão retangular pode preencher essa área e cobrir palavras. Mude a composição para que texto e foto tenham espaço próprio nas duas versões, ou aplique uma superfície de fundo que preserve a legibilidade. A base deve poder ser aprovada como uma composição completa.
Como evitar uma mudança brusca entre formatos?
Compare a fotografia em larguras próximas ao ponto em que o layout muda de duas colunas para uma. Se o motivo aparece numa lateral antes da quebra e na base logo depois, confira a nova relação com a leitura. A curva pode conduzir o olhar ao título na primeira versão e afastá-lo na segunda. Faça uma captura de cada estado, desenhe setas sobre o percurso esperado e verifique se o título mantém a mesma prioridade. Em alguns casos, reduzir a profundidade da curva no formato estreito conserva melhor a relação entre foto e texto do que girar o recorte. Documente essa diferença como uma decisão de composição do componente.
Quais testes fazem parte da aprovação?
Inclua uma foto clara, uma escura, uma com o assunto central e uma com o assunto perto da borda. Observe a passagem entre o recorte e o fundo em larguras intermediárias. Uma curva bonita nos extremos pode criar um vale estreito logo antes de uma mudança de layout. Amplie a página e veja se a borda encosta em texto, legenda ou indicador de foco. Se o corte tem profundidade ajustável, teste também o valor máximo e o mínimo previstos.
Registre a área segura como parte do componente, com exemplos de foto aprovada e foto que exigiu novo enquadramento. Anote quais pontos acompanham a caixa e qual medida limita a invasão da forma. Isso ajuda a pessoa responsável pela próxima página a ajustar a imagem com a intenção original à vista. A equipe consegue revisar a silhueta pela função que ela cumpre no layout e pela parte da cena que precisa ficar reconhecível.
Num primeiro uso, escolha uma composição com uma superfície decorativa claramente separada do texto. Mostre o retângulo e a forma final para quem aprova a página. Peça que identifique o motivo visual que o recorte repete e a região da imagem que precisa permanecer inteira. Se ambos são fáceis de indicar em dois formatos diferentes, o recorte já tem um papel que pode ser registrado e reaplicado com consistência.