CSS, HTML und Javascript mit {stil}

CSS clip-path: inset, polygon, circle, ellipse

CSs clip-path, Freistellen mit durchsichtigem Hintergrund

Ein clip-path legt eine Form über ein Element: Alles außerhalb der Form wird unsichtbar und der Hintergrund des umfassenden Blocks ist darunter sichtbar.

clip-path beschneidet Elemente mit einfachen Polygonen, Kreisen, Ellipsen und Rechtecken oder stellt komplexe Formen mit einem SVG-Pfad frei.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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

CSS clip (alt) vs clip-path (neuer)
Links: Angaben für top, right, bottom, left in CSS clip
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
Schoco mit Form
Schoco mit Form

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.

clip-path Kreis
Schoco mit Form

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%)}
}

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

clip-path Kreis

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.

clip-path Kreis
.poly { clip-path: polygon(0% 0%, 50% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 50%); }
Schoco mit Form
.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.