Heim > Web-Frontend > CSS-Tutorial > Wie kann ich unebene abgerundete Ecken auf einem Div erstellen?

Wie kann ich unebene abgerundete Ecken auf einem Div erstellen?

Barbara Streisand
Freigeben: 2024-12-27 12:29:14
Original
996 Leute haben es durchsucht

How Can I Create Uneven Rounded Corners on a Div?

Ungleichmäßig abgerundete Seiten auf einem Div erstellen

Herausforderung:Entwerfen Sie ein DIV mit den folgenden ungleichmäßig abgerundeten Seiten:

[Bild von DIV mit ungleichmäßiger Rundung Seiten]

Aktuelle Lösung:

Bei Verwendung des Randradius ist die nächste Näherung:

border-bottom-left-radius: 80% 50px;
border-bottom-right-radius: 30% 30px;
Nach dem Login kopieren

Dies führt jedoch zu abgerundeten Ecken zu einheitlich.

Lösung:

Clip-Pfad zur Rettung:

Um die gewünschten unebenen abgerundeten Seiten zu erzeugen, berücksichtigen Sie Verwenden der Clip-Pfad-Eigenschaft, die das Definieren einer geometrischen Form ermöglicht, die den Inhalt eines Elements ausschneidet:

.box {
  height: 200px;
  width: 200px;
  background: blue;
  clip-path: circle(75% at 65% 10%);
}
Nach dem Login kopieren

Hier Code:

  • 75 % definiert den Radius des Kreises.
  • bei 65 % geben 10 % den Mittelpunkt des Kreises relativ zum Container des Elements an.

HTML-Code:

<div class="box">
</div>
Nach dem Login kopieren

Die Clip-Pfad-Eigenschaft wird Erstellen Sie die gewünschten unebenen abgerundeten Seiten und bieten Sie so die Flexibilität, die Form an Ihre spezifischen Anforderungen anzupassen.

Das obige ist der detaillierte Inhalt vonWie kann ich unebene abgerundete Ecken auf einem Div erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage