Layout-freundliche Formen mit der CSS-Funktion xywh() zeichnen

Sie benötigen ein zugeschnittenes Rechteck, das mit seinem Container skaliert. Sie greifen zu clip-path, aber die Definition der Form fühlt sich umständlich an. Sollten Sie Inset-Werte von jeder Kante aus berechnen? Was passiert, wenn die Größe des Containers sich ändert?

Die CSS-Funktion xywh() löst dieses Problem, indem sie Ihnen ermöglicht, Rechtecke auf intuitive Weise zu definieren: Startpunkt plus Dimensionen. Sie wird mittlerweile baseline-unterstützt in allen modernen Browsern und ist damit eine zuverlässige Wahl für produktionsreife responsive Clipping-Lösungen.

Was ist die CSS-Funktion xywh()?

Die Funktion xywh() erstellt rechteckige Grundformen durch Angabe von vier Werten: die x- und y-Koordinaten der oberen linken Ecke, gefolgt von Breite und Höhe. Sie gehört zur Familie der CSS-Grundformen zusammen mit inset(), circle(), ellipse() und polygon().

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

Dies schneidet das Element auf ein Rechteck zu, das 10% von links, 10% von oben beginnt und sich über 80% der Breite und 80% der Höhe erstreckt. Alle vier Werte akzeptieren jede <length-percentage>-Einheit, was responsives Clipping unkompliziert macht.

Browser-Unterstützung: Produktionsreif in 2025

Die Funktion xywh() hat den Baseline-2024-Status erreicht und funktioniert in:

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

Dies ist keine experimentelle Technologie, die Flags oder Polyfills erfordert. Moderne CSS-Formen mit xywh() funktionieren zuverlässig in jedem aktuellen Browser, den Ihre Nutzer verwenden.

Syntax und Parameter

Die Funktion akzeptiert vier erforderliche Werte und ein optionales Schlüsselwort:

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

Positionswerte (x, y): Abstand von der linken und oberen Kante der Referenzbox.

Dimensionswerte (width, height): Die Größe des Rechtecks. Diese müssen nicht-negativ sein.

Schlüsselwort round: Optional. Wenn angegeben, ermöglicht es abgerundete Ecken mit derselben Syntax wie border-radius.

/* Scharfe Ecken */
clip-path: xywh(0 0 100% 100%);

/* Gleichmäßige Rundung */
clip-path: xywh(5% 5% 90% 90% round 12px);

/* Asymmetrische Rundung */
clip-path: xywh(0 0 100% 100% round 20px 0 20px 0);

Responsives Clipping mit Prozentwerten

Die wahre Stärke von xywh() zeigt sich, wenn Sie Prozentwerte verwenden. Im Gegensatz zu festen Pixelwerten reagieren Prozentangaben automatisch auf Änderungen der Container-Größe.

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

Dies erstellt ein responsives Clip-Path-Layout, das proportionale Abstände unabhängig von den Dimensionen der Karte beibehält. Kombinieren Sie es mit Viewport-Einheiten oder calc() für komplexere responsive Muster:

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

xywh() vs. inset(): Die richtige Funktion wählen

Beide Funktionen erstellen Rechtecke, gehen das Problem jedoch unterschiedlich an.

Verwenden Sie inset(), wenn Sie Abstände von jeder Kante definieren:

/* 20px nach innen von allen Kanten */
clip-path: inset(20px);

Verwenden Sie xywh(), wenn Sie explizite Positions- und Größenkontrolle benötigen:

/* Rechteck an bestimmten Koordinaten mit bestimmten Dimensionen */
clip-path: xywh(50px 50px 200px 150px);

Die Funktion xywh() glänzt beim Animieren von Formen oder wenn Sie ein Rechteck benötigen, das nicht direkt mit den Kanten des Elements korreliert. Das Verschieben einer Form mit inset() erfordert die Neuberechnung aller vier Kantenwerte. Mit xywh() passen Sie nur die x- und y-Koordinaten an.

Praktische Anwendungen

Bildmasken mit konsistentem Abstand:

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

Kartenecken-Gestaltung:

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

Animierte Enthüllungseffekte:

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

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

Ausblick: Die Funktion shape()

Die neuere Funktion shape() bietet noch mehr Flexibilität für komplexe Pfade, aber xywh() bleibt das richtige Werkzeug für rechteckige Formen. Sie ist einfacher, lesbarer und bereits heute vollständig unterstützt.

Fazit

Die CSS-Funktion xywh() bietet eine klare, intuitive Syntax für rechteckiges Clipping, die natürlich mit responsiven Layouts skaliert. Ihre prozentualen Werte eliminieren manuelle Berechnungen bei Größenänderungen von Containern, und die vertraute border-radius-Syntax für abgerundete Ecken hält Ihren Code konsistent.

Für jedes Clip-Path-Layout, das Rechtecke erfordert – ob statische Masken oder animierte Enthüllungen – ist xywh() jetzt die produktionsreife Wahl in allen modernen Browsern.

Häufig gestellte Fragen (FAQs)

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