CSS, HTML und Javascript mit {stil}

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

Freistellen mit durchsichtigem Hintergrund: clip-path

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

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

Die einfachste Variante von clip-path ist weiterhin ein Rechteck, 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).

Vergleicht CSS clip vs CSS clip-path
Links: Angaben für top, right, bottom, left in CSS clip
Rechts: Angaben in CSS3 clip-path

Ein einfacher clip-path:

                  +-- top    +-- bottom
                  |          |
clip-path: inset(50px 200px 50px 75px);
                        |          |
                        +--right   +-- left
Beispiel CSS3 clip-path mit abgerundeten Ecken

Mit einem zusätzlichen Wert round für abgerundete Ecken:

img.inset {
                                                          oben rechts und 
                                                          unten links
                                                      +-- right und left
                                                      | 
   clip-path: inset(50px 200px 50px 75px round 45px 10px)
                                                 |
                                                 +-- links oben 
                                                     und rechts unten 
                                                     (top / bottom)
}
…
<img class="inset" src="konfekt.jpg" … />

clip-path circle, inset, ellipse, polygon

Die Notation für clip-path mit einfachen Grundformen wird von allen modernen Browser erkannt. IE und Edge unterstützen clip-path in keiner Variante, Safari braucht noch den webkit-Präfix.

CSS3 clip-path
.circ { clip-path: circle(140px at center) }
oder – für einen responsiblen clip-path –
.circ { clip-path: circle(30% at center) }
7N8A0112
.shape.ins { 
   -webkit-clip-path: inset(10% 10% 10% 10% round 20px);
   clip-path: inset(10% 10% 10% 10% round 20px);
}
7N8A0112
.shape.circle { 
   -webkit-clip-path: circle(45% at center);
   clip-path: circle(45% at center);
}
7N8A0112
.shape.ellipse { 
   -webkit-clip-path: ellipse(50% 35% at center);
   clip-path: ellipse(50% 35% at center);
}
7N8A0112
.shape.polygon { 
   -webkit-clip-path: polygon(10% 5%, 50% 5%, 90% 50%, 90% 90%, 50% 90%, 10% 50%);
   clip-path: polygon(10% 5%, 50% 5%, 90% 50%, 90% 90%, 50% 90%, 10% 50%);
}
7N8A0112
.shape.url { 
   clip-path: url(#spoly);
}

Der Pfad ist in einem SVG-Element vereinbart:

<svg width="0" height="0" viewBox="0 0 1 1">
   <clipPath id="spoly" clipPathUnits="objectBoundingBox">
      <polygon points="0 0.5, 0.5 0, 1 0.5, 0.5 1"></polygon>
   </clipPath>
</svg>

Browser-Support für clip-path

Chrome, Opera, Firefox und Safari unterstützen sowohl die einfachen Grundformen als auch den SVG-Pfad, Safari allerdings nur mit webkit-Prefix.

IE bis einschließlich IE11 und Microsoft EDGE unterstützen clip-path in keiner Variante.

CLIP Path top left right bottom top left bottom right clip clip-path