Clip Path Beispiele

Clip Path Beispiele mit polygoner CSS

Demo

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

Clip-Path Maker
Bild

Clip-Path Maker

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

Rund

Clip Path Maker
Bild

Clip-Path Maker

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

Parallel

Clip Path Maker
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.

Read More
  • 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

nach oben
Adresse

Schöne Strasse 1, Berlin

Deutschland

Links