Verwenden Sie die Clip-Path-Eigenschaft von CSS, um unregelmäßige Grafiken anzuzeigen

clip-path

CSS-Eigenschaften verwenden Clipping, um den anzeigbaren Bereich eines Elements zu erstellen. Der Teil innerhalb des Bereichs wird angezeigt, und der Teil außerhalb des Bereichs wird ausgeblendet.

Beispiel

div {
  Breite: 200px;
  Höhe: 200px;
  Hintergrund: #6c00af;
  -webkit-clip-path: Polygon(
    28% 6%,
    71 % 15 %,
    100 % 75 %,
    18% 39%,
    63 % 27 %,
    16% 22%,
    65 % 19 %
  );
  Clip-Pfad: Polygon(
    28% 6%,
    71 % 15 %,
    100 % 75 %,
    18% 39%,
    63 % 27 %,
    16% 22%,
    65 % 19 %
  );
}

Zeichnen eines Cilp-Path-Artefakts

bennettfeely.com/clippy/

Grammatik

/*Schlüsselwortwerte*/
Clip-Pfad: keiner;

/* <clip-source> Werte */ 
Clip-Pfad: URL (Ressourcen.svg#c1);

/* <Geometriebox> Werte */
Clip-Pfad: Randbox;
Clip-Pfad: Rahmenbox;
Clip-Pfad: Polsterbox;
Clip-Pfad: Inhaltsbox;
Clip-Pfad: Füllfeld;
Clip-Pfad: Strichbox;
Clip-Pfad: Ansichtsbox;

/* <Grundform> Werte */
Clip-Pfad: Einschub (100px 50px);
Clip-Pfad: Kreis (50px bei 0 100px);
Clip-Pfad: Polygon (50 % 0 %, 100 % 50 %, 50 % 100 %, 0 % 50 %);
Clip-Pfad: Pfad ('M0,5,1 C0,5,1,0,0,7,0,0,3 A0,25,0,25,1,1,1,0,5,0,3 A0,25,0,25,1,1,1,1,0,3 C1,0,7,0,5,1,0,5,1 Z');

/*Box- und Formwerte kombiniert */
Clip-Pfad: Padding-Box Kreis (50px bei 0 100px);

/*Globale Werte*/
Clip-Pfad: erben;
Clip-Pfad: Initiale;
Clip-Pfad: nicht festgelegt;

Wert

<clip-source>

Verwenden Sie <url> , um den Pfad des Clip-Elements anzugeben

<basic-shape>

Eine Form, deren Größe und Position durch die <geometrybox>-Werte definiert werden. Wenn kein Geometrierahmen angegeben ist, wird der Begrenzungsrahmen als Referenzrahmen verwendet.

<geometry-box>

Wenn es zusammen mit <basic-shape> deklariert wird, stellt es das entsprechende Referenzfeld für die Grundform bereit. Durch die Anpassung werden die angegebenen Boxränder einschließlich aller Formecken verwendet (beispielsweise der durch border-radius definierte Beschneidungspfad). Die Geometriebox kann einen der folgenden Werte haben:

margin-box

Verwenden Sie margin box als Referenzfeld.

border-box

Verwenden Sie border box als Referenzfeld.

padding-box

Verwenden Sie padding box als Referenzbox.

content-box

Verwenden Sie content box als Referenzfeld.

fill-box

Verwenden Sie den Objektbegrenzungsrahmen als Referenzrahmen.

stroke-box

Verwenden Sie den Strichbegrenzungsrahmen als Referenzrahmen

view-box

Verwenden Sie das nächstgelegene SVG-Ansichtsfenster als Referenzfeld. Wenn ein viewBox -Attribut angegeben wird, um ein SVG-Ansichtsfenster für das Element zu erstellen, wird das Referenzfeld am Ursprung des durch viewBox -Attribut festgelegten Koordinatensystems positioniert. Das Referenzfeld befindet sich am Ursprung des durch das viewBox-Attribut festgelegten Koordinatensystems, und die Abmessungen des Referenzfelds werden verwendet, um die Breiten- und Höhenwerte viewBox Attributs festzulegen.

none

Es wird kein Beschneidungspfad erstellt.

Dies ist das Ende dieses Artikels über die Verwendung der Clip-Path-Eigenschaft von CSS zur Anzeige unregelmäßiger Grafiken. Weitere Informationen zu unregelmäßigen Clip-Path-Grafiken von CSS finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!