Clip Path Beispiele

Clip Path Beispiele mit polygoner CSS

Bilder mit CSS Clip-Path beschneiden

Die CSS habe ich in den Bereich "CSS Editor" vom "Code Editor" kopiert.
Diese CSS wird noch nicht von irgendeinem "Internet Explorer" und auch nicht dem "Edge" unterstützt.
Auf meiner Fullscreen Background Seite findet Ihr unten ein weiteres Beispiel mit enem Tiger.

Clip-Path Maker

Hier könnt Ihr Euch die CSS bequem generieren lassen.

Schräg

 Clip-Path

Bild

Clip-Path Maker

Hier könnt Ihr Euch die CSS bequem generieren lassen. 

Rund

Bild

Clip-Path Maker

Hier könnt Ihr Euch die CSS bequem generieren lassen.

Parallel

Bild

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem laudantium in adipisci ipsa optio quas id excepturi non, eos cupiditate, necessitatibus sapiente illo error. Vero adipisci quidem aut itaque labore.

  • CSS Beispiel 1

    .bild1 {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
    }
  • CSS Beispiel 2

    .bild2 {
        -webkit-clip-path: circle(36% at 50% 50%);
        clip-path: circle(36% at 50% 50%);
    }

    .bild2:hover {
      -webkit-clip-path: none;
      clip-path: none;
    }

  • CSS Beispiel 3 

    .bild3 {
        -webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
        clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
    }

CSS im Code Editor

Unten seht Ihr die Class "bild1" in Zeile 67 markiert und im rechten Bereich vom "CSS Editor" die 3 CSS-Klassen von meinen Beispielen

Code
  • CSS Beispiel Hintergrundbild (unten)

    & when (@bg-type = 'image') {
      background-image: url(@bg-value);
      -webkit-clip-path: polygon(100% 0, 100% 70%, 35% 90%, 0 80%, 0 0);
      clip-path: polygon(100% 0, 100% 70%, 35% 90%, 0 80%, 0 0);
    }

Hintergrund

Hier ist die polygone CSS im Hintergrundbild angewendet

Adresse

Schöne Strasse 1, Berlin

Deutschland

Counter

Counter Statistik