Detaillierte Erklärung zur Verwendung der Clip-Path-Eigenschaft in CSS

Körper {
  Hintergrundfarbe: #000;
}

.fa {
  Rand: 1px durchgezogen #fff;
  Farbe: gelbgrün;
  Polsterung: 10px;
  Rand: 10px;
}

.fa>div {
  Breite: 110px;
  Höhe: 110px;
  Hintergrundfarbe: gelbgrün;
  Rand: 20px automatisch;
}

.polygon1 {
  Clip-Pfad: Polygon (50 % 0 px, 100 % 100 %, 0 px 100 %)
}

.polygon2 {
  Clip-Pfad: Polygon (0px 50 %, 50 % 0, 100 % 50 %, 50 % 100 %)
}

.polygon3 {
  Clip-Pfad: Polygon (0 % 60 %, 20 % 0 %, 60 % 0 %, 40 % 60 %)
}

<div Klasse="fa">
  <p>Polygon</p>
  <p>Der Wert setzt sich aus mehreren Koordinatenpunkten zusammen. Der erste Wert liegt in x-Richtung, der zweite in y-Richtung. </p>
  <p>Die obere linke Ecke ist der Ursprung und die untere rechte Ecke ist der Punkt (100 %, 100 %). </p>
  <div Klasse="polygon1"></div>
  <div Klasse="polygon2"></div>
  <div Klasse="polygon3"></div>
</div> 

Körper {
  Hintergrundfarbe: #000;
}

.fa {
  Rand: 1px durchgezogen #fff;
  Farbe: gelbgrün;
  Polsterung: 10px;
  Rand: 10px;
}

.fa>div {
  Breite: 110px;
  Höhe: 110px;
  Hintergrundfarbe: gelbgrün;
  Rand: 20px automatisch;
}

.Kreis1 {
  Clip-Pfad: Kreis (50 % bei 50 % 50 %)
}

.Kreis2 {
  Clip-Pfad: Kreis (70 % bei 50 % 50 %)
}

.Kreis3 {
  Clip-Pfad: Kreis (30 % bei 10 % 10 %)
}

<div Klasse="fa">
  <p>Kreis</p>
  <p>Der Wert besteht aus einem Koordinatenpunkt und einem Radius. </p>
  <p>Die obere linke Ecke ist der Ursprung und die untere rechte Ecke ist der Punkt (100 %, 100 %). </p>
  <p>Beim Definieren des Radius können Sie das Schlüsselwort at verwenden, um die Koordinaten zu definieren. </p>
  <div Klasse="Kreis1"></div>
  <div Klasse="circle2"></div>
  <div Klasse="circle3"></div>
</div> 

Körper {
  Hintergrundfarbe: #000;
}

.fa {
  Rand: 1px durchgezogen #fff;
  Farbe: gelbgrün;
  Polsterung: 10px;
  Rand: 10px;
}

.fa>div {
  Breite: 110px;
  Höhe: 110px;
  Hintergrundfarbe: gelbgrün;
  Rand: 20px automatisch;
}

.ellipse1 {
  Clip-Pfad: Ellipse (30 %, 20 % bei 50 %, 50 %)
}

.ellipse2 {
  Clip-Pfad: Ellipse (20 %, 30 %, 50 %, 50 %)
}

.ellipse3 {
  Clip-Pfad: Ellipse (60 %, 10 % bei 10 %, 10 %)
}

<div Klasse="fa">
  <p>Ellipse</p>
  <p>Der Wert besteht aus dem Radius der X-Achse der Ellipse, dem Radius der Y-Achse und den Koordinaten der Positionierungsellipse. </p>
  <p>Die obere linke Ecke ist der Ursprung und die untere rechte Ecke ist der Punkt (100 %, 100 %). </p>
  <p>Das Schlüsselwort at trennt den Radius von den Koordinaten</p>
  <div Klasse="ellipse1"></div>
  <div Klasse="ellipse2"></div>
  <div Klasse="ellipse3"></div>
</div>

Körper {
  Hintergrundfarbe: #000;
}

.fa {
  Rand: 1px durchgezogen #fff;
  Farbe: gelbgrün;
  Polsterung: 10px;
  Rand: 10px;
}

.fa>div {
  Breite: 110px;
  Höhe: 110px;
  Hintergrundfarbe: gelbgrün;
  Rand: 20px automatisch;
}

.einsetzen1 {
  Clip-Pfad: Einschub (25 % 0 % 25 % 0 % rund 0 % 25 % 0 % 25 %)
}

.einsetzen2 {
  Clip-Pfad: Einschub (0 % 25 % 25 % 0 % rund 25 % 25 % 25 % 0 %)
}

.einsetzen3 {
  Clip-Pfad: Einschub (25 % 25 % 0 % 0 % rund 0 % 25 % 0 % 25 %)
}

<div Klasse="fa">
  <p>Einschub</p>
  <p>Der Wert ist (oben rechts unten links rund oben links Radius oben rechts Radius unten rechts Radius unten links Radius)</p>
  <p>Der Wert vor der Runde gibt den Abstand an. Wenn der erste Wert 25 % beträgt, bedeutet dies, dass das Bild ab 25 % oben gezeichnet wird.</p>
  <div Klasse="inset1"></div>
  <div Klasse="inset2"></div>
  <div Klasse="inset3"></div>
</div>