Wie kann ich mit CSS einen geschwungenen Rand mit abgerundetem Ende erstellen?

Randkurven-CSS: Geschwungene Kanten mit Kreisen erstellen

Im Webdesign ist es oft notwendig, geschwungene Ränder oder Kanten zu erstellen, um die Ästhetik zu verbessern einer Seite. Eine häufige Herausforderung besteht darin, einen Kreis mit einem gebogenen Ende zu erstellen, wie im bereitgestellten Bild gezeigt.

Die Herausforderung: Einen abgerundeten Rand mit einem gebogenen Ende erreichen

Das erreichen Der gewünschte Effekt in CSS kann schwierig sein. Die alleinige Verwendung des Randradius führt zu einer halbkreisförmigen Form und nicht zu einer Kurve mit einem verlängerten Ende.

Die Lösung: SVG als Hintergrund nutzen

Um eine zu erstellen Um in CSS einen Rahmen mit gebogenem Ende zu erstellen, können wir SVG (Scalable Vector Graphics) verwenden. Mit SVG können wir komplexe Formen mithilfe von XML-Code definieren.

Der Code:

.bottom-bar {
  background: #29a7e8;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  text-align: center;
}

.circle {
  display: inline-block;
  position: relative;
  top: -28px;
  border-radius: 100%;
  background: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewbox="10 10 45 15" width="64" height="64" fill="%2329a7e8"><path d="M12 24 L52 24 L52 16 C40 16 42 10 32 10 C20 10 22 16 12 16 Z"></path></svg>") 0 0/100% 100% no-repeat;
  width: 60px;
  height: 60px;
  margin: 0 1rem;
}

Erklärung:

• Wir erstellen eine Containerklasse .bottom-bar, um die Hintergrundfarbe, Positionierung und Höhe festzulegen.
• Wir definieren eine Klasse .circle, um die Kreise darzustellen.
• Wir setzen top: -28px, um die Kreise leicht über der unteren Leiste zu positionieren.
• Die Hintergrundeigenschaft verwendet einen Daten-URI, um ein SVG-Bild als einzubetten Hintergrund. Der SVG-Pfad definiert eine Form mit einem gebogenen Ende.
• Wir geben die Abmessungen und den horizontalen Rand für die Kreise an.

Vorteile der Verwendung von SVG:

• SVGs sind Vektorgrafiken, das heißt, sie sind auflösungsunabhängig und können ohne Verlust skaliert werden Qualität.
• Sie bieten eine größere Flexibilität beim Erstellen komplexer Formen im Vergleich zu CSS-Eigenschaften allein.
• SVGs können einfach in HTML- und CSS-Code integriert werden.

Durch die Verwendung von Mit SVG als Hintergrund können wir effektiv den gewünschten geschwungenen Rand mit abgerundeten Enden erzielen und so die optische Attraktivität unseres Webdesigns verbessern.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS einen geschwungenen Rand mit abgerundetem Ende erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!