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

CSS clip-path legt eine Form über ein Element: Alles außerhalb der Form wird unsichtbar und der Hintergrund des umfassenden Blocks ist darunter sichtbar. Die vordefinieren Formen des Freistellpfads reichen vom einfachen Rechteck über Kreis und Ellipse bis hin zum Polygon (Vieleck).

CSs clip-path, Freistellen mit durchsichtigem Hintergrund

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

CSS clip-path inset – Rechteck freistellen – clipping rect
Angaben in CSS3 clip-path: top, right, bottom, left

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
Schoco mit Form
Schoco mit Form

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.

clip-path circle
clip-path circle animated

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.

clip-path Kreis

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.

clip-path Polygon – Vieleck, eckige Form
.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

Alle modernen Browser unterstützen sowohl die einfachen Grundformen als auch die URL-Variante mit einem SVG-Pfad (nicht IE in allen Versionen).

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.

Suchen auf mediaevent.de