Wie erstelle ich unregelmäßig geformte Div-Ränder mit CSS?

Anpassen der Div-Randradien für unregelmäßige Kurven

Frage:

Wie können Sie unebene, abgerundete Seiten an einem Div erreichen? vom typischen Randradius abweichen Form?

Lösung:

Während der Randradius abgerundete Ecken ermöglicht, erfordert das Erstellen unregelmäßiger Kurven einen anderen Ansatz. Hier ist eine Lösung mit CSS-Clip-Pfad:

.box {
  height: 200px;
  width: 200px;
  background: blue;
  clip-path: circle(75% at 65% 10%);  // Customize the shape here
}

Die Clip-Pfad-Eigenschaft verwendet eine Kreisfunktion, um die Form des Beschneidungsbereichs zu definieren. Dadurch können Sie den Prozentsatz und die Position des Kreises festlegen, was zu einem ungleichmäßig gerundeten Teil führt. Im bereitgestellten Beispiel:

• circle(75%): Definiert den Radius des Kreises als 75% der Div-Größe.
• bei 65% 10%: Positioniert den Mittelpunkt von der Kreis bei 65 % auf der horizontalen Achse und 10 % auf der vertikalen Achse.

Indem Sie diese anpassen Parameter können Sie einzigartige und komplexe Div-Formen erstellen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich unregelmäßig geformte Div-Ränder mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!