CSS Formen
Die einfachste Variante von clip-path ist ein Rechteck wie bei der älteren CSS-Eigenschaft clip, das jetzt inset(top right bottom left) angesprochen wird. 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).
Rechts: Angaben in CSS3 clip-path
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.
.poly {
clip-path: polygon(0% 0%, 50% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 50%);
}
.star {
clip-path:polygon(80% 100%, 50% 100%, 20% 100%, 20% 65.5%, 20% 38.5%, 20% 0%, 50% 0%, 80% 0%, 80% 38.5%, 80% 65.5%);
animation: rect 10s infinite;
}@keyframes rect {
50% {clip-path: polygon(69% 100%, 50% 88%, 31.5% 100%, 32% 65.5%, 20% 38.5%, 39% 28.5%, 50% 0%, 61% 28.5%, 80% 38.5%, 68% 65.5%); }
}
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.