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: inset – 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
CSS clip-path: inset mit einem zusätzlichen Wert round für abgerundete Ecken:
img.inset {
clip-path: inset(15% 10% 20% 10%
round 12% 2%)
▲ ▲
│ │
links oben ───┘ │
rechts unten │
(top bottom) │
│
rechts oben ───┘
links unten (left right)
}
…
<img decoding="async" 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">
clip-path circle mit Animation
Die Notation für clip-path mit den einfachen Grundformen Viereck, Kreis, Ellipse und Vieleck wird von allen modernen Browser erkannt. Da clip-path auf numerischen Werten beruht (am besten auf %-Werten), läßt sich die Maske animieren.
Der Freistellpfad in Form eines Kreises 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);
}
clip-path 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%); }
}
Übersicht: clip-path und mask-Optionen
Browser-Support für Masken und Beschneidungspfade
Alle modernen Browser unterstützen sowohl die einfachen Grundformen als auch die URL-Variante mit einem SVG-Pfad (IE in keiner Version).
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.
