CSS, HTML und Javascript mit {stil}

CSS clip-path: inset, polygon, circle

CSS clip-path

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

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

Links: Angaben für top, right, bottom, left in CSS clip
Rechts: Angaben in CSS3 clip-path
CSS3 clip-path
img.inset {
    -webkit-clip-path: inset(50px 200px 50px 75px round 45px 10px);
    -moz-clip-path: inset(50px 200px 50px 75px round 45px 10px);
    clip-path: inset(50px 200px 50px 75px round 45px 10px)
}
…
<img class="inset" src="konfekt.jpg" … />

clip-path circle, inset, ellipse, polygon

Die Notation für clip-path mit einfachen Grundformen wird nur von Webkit-Browsern (mit Browser-Präfix) erkannt. IE und Edge unterstützen clip-path in keiner Variante, Firefox unterstützt nur die URL-Option von clip-path.

CSS3 clip-path
.circ { clip-path: circle(140px at center) }

oder – für einen responsiblen clip-path –

.circ { clip-path: circle(30% at center) }
.shape.ins { 
   -webkit-clip-path: inset(10% 10% 10% 10% round 20px);
   clip-path: inset(10% 10% 10% 10% round 20px);
}
.shape.circle { 
   -webkit-clip-path: circle(45% at center);
   clip-path: circle(45% at center);
}
.shape.ellipse { 
   -webkit-clip-path: ellipse(50% 35% at center);
   clip-path: ellipse(50% 35% at center);
}
.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%);
}
.shape.url { 
   clip-path: url(#spoly);
}

Browser-Support für clip-path

Chrome, Opera und Safari unterstützen sowohl die einfachen Grundformen als auch den SVG-Pfad, Firefox unterstützt zurzeit nur das Beschneiden eines Elements mit clip-path: url(#clippath) – die Referenz auf einen SVG-Pfad.