Desenhando Formas Amigáveis ao Layout com a Função CSS xywh()

Você precisa de um retângulo recortado que escale com seu contêiner. Você recorre ao clip-path, mas definir a forma parece estranho. Deveria calcular valores de inset a partir de cada borda? O que acontece quando o contêiner redimensiona?

A função CSS xywh() resolve isso permitindo que você defina retângulos da forma intuitiva: ponto inicial mais dimensões. Agora tem suporte baseline em todos os navegadores evergreen, tornando-a uma escolha confiável para recortes responsivos prontos para produção.

O Que É a Função CSS xywh()?

A função xywh() cria formas básicas retangulares especificando quatro valores: as coordenadas x e y do canto superior esquerdo, seguidas de largura e altura. Ela pertence à família de formas básicas CSS junto com inset(), circle(), ellipse() e polygon().

.element {
  clip-path: xywh(10% 10% 80% 80%);
}

Isso recorta o elemento para um retângulo começando 10% da esquerda, 10% do topo, abrangendo 80% da largura e 80% da altura. Todos os quatro valores aceitam qualquer unidade <length-percentage>, tornando o recorte responsivo direto.

Suporte dos Navegadores: Pronto para Produção em 2025

A função xywh() alcançou o status Baseline 2024 e funciona em:

• Chrome/Edge 119+
• Firefox 122+
• Safari 17.2+

Esta não é uma tecnologia experimental que requer flags ou polyfills. Formas CSS modernas usando xywh() funcionam de forma confiável em todos os navegadores atuais que seus usuários utilizam.

Sintaxe e Parâmetros

A função aceita quatro valores obrigatórios e uma palavra-chave opcional:

clip-path: xywh(x y width height round border-radius);

Valores de posição (x, y): Distância das bordas esquerda e superior da caixa de referência.

Valores de dimensão (width, height): O tamanho do retângulo. Estes devem ser não-negativos.

Palavra-chave round: Opcional. Quando incluída, habilita cantos arredondados usando a mesma sintaxe de border-radius.

/* Cantos retos */
clip-path: xywh(0 0 100% 100%);

/* Arredondamento uniforme */
clip-path: xywh(5% 5% 90% 90% round 12px);

/* Arredondamento assimétrico */
clip-path: xywh(0 0 100% 100% round 20px 0 20px 0);

Recorte Responsivo com Porcentagens

O verdadeiro poder do xywh() emerge quando você usa valores percentuais. Diferentemente de valores fixos em pixels, porcentagens respondem automaticamente às mudanças de tamanho do contêiner.

.card-image {
  clip-path: xywh(5% 5% 90% 90% round 8px);
}

Isso cria um layout de clip-path responsivo que mantém espaçamento proporcional independentemente das dimensões do card. Combine com unidades de viewport ou calc() para padrões responsivos mais complexos:

.hero-clip {
  clip-path: xywh(
    2vw 
    2vh 
    calc(100% - 4vw) 
    calc(100% - 4vh) 
    round 1rem
  );
}

xywh() vs. inset(): Escolhendo a Função Certa

Ambas as funções criam retângulos, mas abordam o problema de forma diferente.

Use inset() quando você estiver definindo margens a partir de cada borda:

/* 20px para dentro de todas as bordas */
clip-path: inset(20px);

Use xywh() quando você precisar de controle explícito de posição e tamanho:

/* Retângulo em coordenadas específicas com dimensões específicas */
clip-path: xywh(50px 50px 200px 150px);

A função xywh() brilha ao animar formas ou quando você precisa de um retângulo que não se correlaciona diretamente com as bordas do elemento. Mover uma forma com inset() requer recalcular todos os quatro valores de borda. Com xywh(), você ajusta apenas as coordenadas x e y.

Aplicações Práticas

Máscaras de imagem com padding consistente:

.thumbnail {
  clip-path: xywh(4% 4% 92% 92% round 6px);
}

Tratamentos de cantos de cards:

.feature-card {
  clip-path: xywh(0 0 100% 100% round 16px 16px 0 0);
}

Efeitos de revelação animados:

.reveal {
  clip-path: xywh(0 0 0% 100%);
  transition: clip-path 0.3s ease-out;
}

.reveal:hover {
  clip-path: xywh(0 0 100% 100%);
}

Olhando Adiante: A Função shape()

A função mais recente shape() oferece ainda mais flexibilidade para caminhos complexos, mas xywh() permanece a ferramenta certa para formas retangulares. É mais simples, mais legível e totalmente suportada hoje.

Conclusão

A função CSS xywh() fornece uma sintaxe limpa e intuitiva para recorte retangular que escala naturalmente com layouts responsivos. Seus valores baseados em porcentagem eliminam cálculos manuais quando os contêineres redimensionam, e a sintaxe familiar de border-radius para cantos arredondados mantém seu código consistente.

Para qualquer layout de clip-path que requeira retângulos—sejam máscaras estáticas ou revelações animadas—xywh() é agora a escolha pronta para produção em todos os navegadores modernos.

Perguntas Frequentes

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..