CSS Formen
clip-path beschneidet Elemente mit einfachen Polygonen, Kreisen, Ellipsen und Rechtecken oder stellt komplexe Formen mit einem SVG-Pfad frei. Mit top, right, bottom und left gibt inset den Abstand vom Rand des Bildes an und das beschnittene Objekt muss nicht mehr absolut positioniert sein (was bei CSS2.1 clip noch der Fall war).
Ein einfacher clip-path – vorzugsweise mit %-Angaben, damit die Maske sich responsiv bei allen Bildgrößen verhält:
+-- top +-- bottom | | clip-path: inset(15% 10% 20% 10%); | | right --+ +-- left
Mit einem zusätzlichen Wert round für abgerundete Ecken:
img.inset { oben rechts und unten links +-- right und left | clip-path: inset(15% 10% 20% 10% round 12% 2%); | +-- links oben und rechts unten (top / bottom) } … <img loading="lazy" class="inset" src="chocie-920.webp" srcset="chocie-460.webp 460w,chocie-920.webp 920w" sizes="(max-width: 460px) 100vw, 920px" width="920" height="534" alt="Konfekt in Form">
Wenn keine geometrischen Maskenformen gefragt sind, sondern natürliche Formen, und auch mit weichen Übergängen kommt CSS mask-image anstelle von clip-path in Frage.
clip-path circle mit Animation
Die Notation für clip-path mit einfachen Grundformen wird von allen modernen Browser erkannt. Wenn clip-path auf numerischen Werten (und wieder am besten auf %-Werten) beruht, läßt sich die Maske animieren.
Die Maske lässt sich anhand von Schlüsselwörtern (top, right, left, bottom und center) oder mit numerischen Werten (px, %) platzieren.
.circle-animated { clip-path: circle(30% at 0%); animation: look 5s infinite; } @keyframes look { 0% {clip-path: circle(30% at 0%)} 50% {clip-path: circle(30% at 100%)} }
Ellipse
clip-path: ellipse () funktioniert genauso wie circle, nur dass die Ellipse durch zwei Werte bestimmt wird: Der erste Wert für die Breite, der zweite für die Höhe.
Der dritte Wert bestimmt die Position des Mittelpunkts der Ellipse.
.ellipse { clip-path: ellipse(50% 35% at center); }
Polygon
clip-path: polygon (x1 y1, x2 y2, … , xn yn) legt den Beschneidungspfad anhand von beliebig vielen Punkten xy fest.
Browser-Support für Masken und Beschneidungspfade
Chrome, Opera, Firefox und Safari unterstützen sowohl die einfachen Grundformen als auch die URL-Variante mit einem SVG-Pfad. IE bis einschließlich IE11 unterstützt CSS clip-path in keiner Variante.
Masken mit weichen Konturen funktionieren mit zusätzlichen Bitmap-Bildern für die Maske.
Und es gibt noch eine weitere Option sowohl für harte als auch weiche Masken: eine SVG-Grafik mit einem image-Element und SVG clipPath.