Créer des formes adaptatives avec la fonction CSS xywh()

Vous avez besoin d’un rectangle découpé qui s’adapte à son conteneur. Vous vous tournez vers clip-path, mais définir la forme semble compliqué. Devriez-vous calculer les valeurs d’encart depuis chaque bord ? Que se passe-t-il lorsque le conteneur est redimensionné ?

La fonction CSS xywh() résout ce problème en vous permettant de définir des rectangles de manière intuitive : point de départ plus dimensions. Elle est désormais prise en charge de manière standard par tous les navigateurs modernes, ce qui en fait un choix fiable pour un découpage responsive prêt pour la production.

Qu’est-ce que la fonction CSS xywh() ?

La fonction xywh() crée des formes rectangulaires de base en spécifiant quatre valeurs : les coordonnées x et y du coin supérieur gauche, suivies de la largeur et de la hauteur. Elle appartient à la famille des formes de base CSS aux côtés de inset(), circle(), ellipse() et polygon().

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

Cela découpe l’élément en un rectangle commençant à 10 % depuis la gauche, 10 % depuis le haut, s’étendant sur 80 % de la largeur et 80 % de la hauteur. Les quatre valeurs acceptent toute unité <length-percentage>, ce qui rend le découpage responsive simple.

Compatibilité navigateurs : prête pour la production en 2025

La fonction xywh() a atteint le statut Baseline 2024 et fonctionne sur :

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

Il ne s’agit pas d’une technologie expérimentale nécessitant des flags ou des polyfills. Les formes CSS modernes utilisant xywh() fonctionnent de manière fiable dans tous les navigateurs actuels utilisés par vos utilisateurs.

Syntaxe et paramètres

La fonction accepte quatre valeurs obligatoires et un mot-clé optionnel :

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

Valeurs de position (x, y) : Distance depuis les bords gauche et supérieur de la boîte de référence.

Valeurs de dimension (width, height) : La taille du rectangle. Ces valeurs doivent être non négatives.

Mot-clé round : Optionnel. Lorsqu’il est inclus, il active les coins arrondis en utilisant la même syntaxe que border-radius.

/* Coins nets */
clip-path: xywh(0 0 100% 100%);

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

/* Arrondi asymétrique */
clip-path: xywh(0 0 100% 100% round 20px 0 20px 0);

Découpage responsive avec les pourcentages

La véritable puissance de xywh() se révèle lorsque vous utilisez des valeurs en pourcentage. Contrairement aux valeurs fixes en pixels, les pourcentages répondent automatiquement aux changements de taille du conteneur.

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

Cela crée une mise en page avec clip-path responsive qui maintient un espacement proportionnel quelle que soit la dimension de la carte. Combinez avec des unités viewport ou calc() pour des motifs responsive plus complexes :

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

xywh() vs. inset() : choisir la bonne fonction

Les deux fonctions créent des rectangles, mais elles abordent le problème différemment.

Utilisez inset() lorsque vous définissez des marges depuis chaque bord :

/* 20px vers l'intérieur depuis tous les bords */
clip-path: inset(20px);

Utilisez xywh() lorsque vous avez besoin d’un contrôle explicite de la position et de la taille :

/* Rectangle à des coordonnées spécifiques avec des dimensions spécifiques */
clip-path: xywh(50px 50px 200px 150px);

La fonction xywh() excelle lors de l’animation de formes ou lorsque vous avez besoin d’un rectangle qui ne correspond pas directement aux bords de l’élément. Déplacer une forme avec inset() nécessite de recalculer les quatre valeurs de bord. Avec xywh(), vous ajustez uniquement les coordonnées x et y.

Applications pratiques

Masques d’image avec espacement cohérent :

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

Traitement des coins de cartes :

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

Effets de révélation animés :

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

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

Perspectives : la fonction shape()

La fonction plus récente shape() offre encore plus de flexibilité pour les tracés complexes, mais xywh() reste l’outil approprié pour les formes rectangulaires. Elle est plus simple, plus lisible et entièrement prise en charge aujourd’hui.

Conclusion

La fonction CSS xywh() fournit une syntaxe claire et intuitive pour le découpage rectangulaire qui s’adapte naturellement aux mises en page responsive. Ses valeurs basées sur les pourcentages éliminent les calculs manuels lors du redimensionnement des conteneurs, et la syntaxe familière de border-radius pour les coins arrondis maintient la cohérence de votre code.

Pour toute mise en page avec clip-path nécessitant des rectangles — qu’il s’agisse de masques statiques ou de révélations animées — xywh() est désormais le choix prêt pour la production sur tous les navigateurs modernes.

FAQ

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..